I'm trying to use ably.io with Angular and Azure Functions using the JWT way of authenticating since it's secure, but I'm having issues with configuring the angular side of it. The use case is for a live auction site to update bids in realtime. There isn't a specific angular tutorial for this so I'm trying to piece it together. Also this code
realtime.connection.once('connected', function () {
console.log('Client connected to Ably using JWT')
alert("Client successfully connected Ably using JWT auth")
});
never throws the alert so I don't think it's working right. I used to have it working where I wasn't using ably JWT, but had the API key on the client-side in a component like this
let api = "<api key>";
let options: Ably.Types.ClientOptions = { key: api };
let client = new Ably.Realtime(options); /* inferred type Ably.Realtime */
let channel = client.channels.get(
"auctions"
);
and I could subscribe to that channel and update auctions accordingly by their id inside ngOnInit()
channel.subscribe(message => {
const auction = this.posts.find(action => {
return action.id === message.data.auctionId;
});
if (auction) {
auction.currentBid = message.data.lastBid;
}
});
but I need to switch this logic for JWT and somehow feed that JWT token into different components as well.
Ably.io JWT tutorial reference
I put the following in my angular login service
login(email: string, password: string) {
const authData: AuthDataLogin = { email: email, password: password };
return this.http
.post<{
token: string;
expiresIn: number;
userId: string;
}>(environment.azure_function_url + "/POST-Login", authData)
.pipe(takeUntil(this.destroy)).subscribe(response => {
//JWT login token. Not Ably JWT Token
const token = response.token;
this.token = token;
if (token) {
console.log('Fetching JWT token from auth server')
var realtime = new Ably.Realtime({
authUrl: "http://localhost:7071/api/AblyAuth"
});
realtime.connection.once('connected', function () {
console.log('Client connected to Ably using JWT')
alert("Client successfully connected Ably using JWT auth")
});
...
}
With my azure function already configured, When I login, the browser console outputs
GET wss://realtime.ably.io/?access_token=<token was here>&format=json&heartbeats=true&v=1.1&lib=js-web-1.1.22
SO it returns my token, but
the alert never happens
I'm not sure how to grab that JWT token that's returned to the browser. I was thinking I could store it in localStorage to share between components and clear out localStorage when user logs out, but I need to be able to subscribe to response and assign the token to a variable, but I didn't see in ably javascript tutorial how to get variable assigned to JWT Token response since it's being called with this syntax.
I appreciate any help with this!
var realtime = new Ably.Realtime({
authUrl: "http://localhost:7071/api/AblyAuth"
});
My azure function looks like
const checkAuth = require('../middleware/check-auth');
var jwt = require("jsonwebtoken")
var appId = '<APP ID>'
var keyId = '<key ID>'
var keySecret = '<key secret>'
var ttlSeconds = 60
var jwtPayload =
{
'x-ably-capability': JSON.stringify({ '*': ['publish', 'subscribe'] })
}
var jwtOptions =
{
expiresIn: ttlSeconds,
keyid: `${appId}.${keyId}`
}
console.log("JwtPayload");
console.log(jwtPayload);
console.log("jwtOptions");
console.log(jwtOptions);
module.exports = function (context, req) {
console.log("INSIDE ABLY AUTH")
// checkAuth(context, req);
console.log('Sucessfully connected to the server auth endpoint')
jwt.sign(jwtPayload, keySecret, jwtOptions, function (err, tokenId) {
if (err) {
console.log("ERR")
console.log(err)
console.trace()
return
}
context.res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate')
context.res.setHeader('Content-Type', 'application/json')
console.log('Sending signed JWT token back to client')
console.log(tokenId)
context.res = {
status: 200,
body: JSON.stringify(tokenId),
headers: {
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Set-Cookie",
"Access-Control-Max-Age": "86400",
"Vary": "Accept-Encoding, Origin",
"Content-Type": "application/json"
}
};
context.done();
})
}
I'd recommend if you're wanting to intercept the JWT prior to passing it to Ably (so as to verify the contents, and also use the JWT for other components), you make use of authCallback instead of authUrl. You can use a function instead of a direct URL, within which you can call the endpoint, and do anything you like with the response, prior to passing the JWT back to the Ably constructor. I've made a JavaScript example of using the authCallback for normal Token Authentication, but the same principle applies.
As to why you're not seeing the alert, it looks like you're sending an invalid JWT for what Ably is expecting, and thus you're not successfully connecting to Ably. For example, you're specifying 'expiresIn' rather than 'exp'. For a token to be considered valid, it expected certain elements in a very specific structure, see the documentation. I'd recommend for this sort of situation where you're not certain what's breaking that you make use of verbose logging, which you can enable in the connection constructor as "log": 4.
Related
I have been using NextJS, Twitter-lite to build an application using the twitter app, I basically am trying to implement the functionality in which users can post a tweet from the app to their twitter accounts. I have also used Next-Auth for implementing oAuth for twitter.
So after some working, I have managed to make it work and highlight my error - Access tokens. I want to fetch access tokens from the user after they have logged in,
In the below example - I run this script and a post is updated to my account indeed
Here is my code for the api/twitter/post.js
import Twitter from 'twitter-lite';
import { getSession } from 'next-auth/react'
import { getToken } from 'next-auth/jwt';
export default async (req, res) =>{
var Twit = require('twit')
const session = await getSession({ req });
const token = await getToken({
req,
secret: process.env.NEXTAUTH_SECRET
});
console.log(token.twitter.accessToken)
var T = new Twit({
consumer_key: process.env.TWITTER_CONSUMER_KEY,
consumer_secret: process.env.TWITTER_CONSUMER_SECRET,
access_token: 'process.env.TWITTER_ACCESS_TKN',
access_token_secret: 'process.env.TWITTER_ACCESS_TKN_SCRT'
});
T.post('statuses/update', { status: 'hello worldj!' }, function(err, data, response) {
console.log(data)
})
return res.status(200).json({ status: 'ok'});
}
Now this does work, when I hit my api route a new tweet is posted but only to 'my' account because I provided my access_tokens, I would like to know how I can get users access tokens, I have already signed them in using NextAuth so I'm sure I'm just missing a few things.
So I figured this one out,
In the call backs functions in the [...nextauth].js, I was just fetching the access_tokens with an outdated name and the new name is account.oauth_token
For anyone who ever encounters this issue - (Trying to fetch logged in users access tokens to access restricted twitter endpoints)
callbacks: {
async jwt({ token, user, account = {}, profile, isNewUser }) {
if (account.provider && !token [account.provider]) {
token[account.provider] = {};
}
if(account.oauth_token) {
token[account.provider].accessToken = account.oauth_token;
}
if (account.oauth_token_secret) {
token [account.provider].refreshToken = account.oauth_token_secret;
}
return token
},
This is how you get the logged in users access_token and access_token_secret
Today I'v been trying to send a jwt token back to the client via a header.
Sadly I cant get it to work, my current code looks like this.
the resolver/mutation
// log user in
Login: async(parent, args, context, info) =>{
const LoginUser = await user.findOne({username: args.username})
if (LoginUser.password == args.password){
//loginsucces
const token = jwt.sign({id: user.id}, process.env.TOKEN_SECRET);
context.res.header = ("auth", token)
LoginUser.token = token;
return LoginUser;
}else{
return LoginUser;
}
}
app.js
const server = new ApolloServer({
typeDefs,
resolvers,
context: ({ res }) => ({
res
})
});
For some reason the code doesnt recognise .header so it wont send the token. Currently i send it via the token field form the user. But that takes up space in my mongodb, and destroys the whole purpose of jwt.
Am I just forgetting a function or not getting it?
I've been struggling to do this for about 6 days...
Everything is working perfectly such as authorization but one problem I had is making authentication.
On my user model (for creating the database schema) I do have a way to generate a token for logged in users or registered.
userSchema.methods.generateAuthToken = function(){
const token = jwt.sign({ _id: this._id }, config.get('jwtPrivateKey'));
return token;
}
So when user post to /login, server will respond with a token:
router.post('/', async (req, res) =>{
// Here i'm validating data and then if everything is right the code under will run.
console.log('logged in as: ' + user.username);
// Here i'm using the function to generateAuthToken().
const token = user.generateAuthToken();
console.log("Token from server: " + token);
// now here is my main problem i would like to use cookies to store it for an hour or so.
// then client can send it back to server for protected route.
res.status(200).send(token);
});
I have made a middleware function for auth (to check the token if you're going through a protected route)
module.exports = function (req, res, next){
// instead of using headers i would like to check for the cookie value if it's the token,
// pass the user in, else Access denied.
// I have no idea how to use cookie parser with middleware functions.
const token = req.header('x-auth-token');
if(!token) return res.status(401).send('Access denied. Sign in or register.');
try{
const decoded = jwt.verify(token, config.get('jwtPrivateKey'));
req.user = decoded;
next();
}
catch(err){
res.status(400).send('Invalid Token!');
}
}
here i'm using the auth middleware function:
const express = require('express');
const router = express.Router();
const auth = require('../middleware/auth');
// but it's actually not passing the user in since i haven't done it with cookies.
router.get('/', auth, (req, res) =>{
res.render('index', {});
});
I do know I can do it with localStorage but it's a terrible practice and it would be better to store it on cookies so no one could hack on.
Is there any good approach to solve this problem? I'm kinda lost and lost hope to go back to sessionID (which I don't want to :( ).
After you request on frontend, you need get the response (token) and save on browser using this for example:
fetch('http://your-api-host/login', {
method: 'POST',
body: {
username: "user1",
password: "passworduser"
}
})
.then((res) => res.text((res)))
.then((token) => {
document.cookie = `AUTH_API=${token}`; <-- this save the cookie
})
With this value saved on frontend you need send this information on all requests, it's commum send this value on your HEADER (how you makes), to save on header you need read the value from token and put on header, like this:
const headersTemp = document.cookie.split(';'); // <-- this get all cookies saves and splits them in the array.
const finalHeaders = {};
headersTemp.forEach((header) => { // <-- looping on all cookies
const headerTemp = header.split('='); // <-- split each cookie to get key and value
finalHeaders[headerTemp[0].trim()] = headerTemp[1].trim() // <-- save on object to access using keys.
})
Now you can access all cookies using the key (the same used before), I used the key AUTH_API to save my cookie, let's send the request using fetch api:
fetch('http://your-api-host/route-protected', {
method: 'POST',
headers: {
'x-auth-token': finalHeaders['AUTH_API']
},
})
If you creating your application using libraries how React or any SPA framework, probably you will use tools like Axios, and I recommend uses libraris how This, it's more easy to work with cookies.
I am building an angular application that supports JWT authentication. I build my JWT server using Spring Boot. A user provides his/her credentials for authentication. After a successful authentication, a response containing the access token and authentication will be forwarded to the user.
There is a exp value in my JWT access token containing the token lifespan. The refresh token is persisted in a DB.
To get a new access token, you have to sent a request with this header
--->>>X-Auth: refreshToken<<<--- to get a new access token.
I implemented a function that will resend a request for an access token using the refresh token.
I had tried implementing the function to run the function globally but to no avail. I wish to find out if there is a way that I could run the function once globally in my angular app.
/***Login sample request***/
{
"password": "secret123",
"username": "nkengbeza"
}
/***Login sample response***/
{
"access_token": "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJua2VuZ2JlemEiLCJhdXRoIjpbeyJhdXRob3JpdHkiOiJBRE1JTiJ9XSwidG9rZW5fdHlwZSI6ImFjY2Vzc190b2tlbiIsImlhdCI6MTU0ODY2OTE0MSwiZXhwIjoxNTQ4NjcyNzQxfQ.oaWOIaeMqLg35unM82bcNg88ga030m5J1k7E5EM2O0s",
"refresh_token": "a102c7a063c7f149bcb276eadf83c0c61659ff9b37c0a8ab7d29e92c08ac94e7aa99abc5e9a3c1c59da4e66f1ada0c6a02dca2f577a4aa3f81885c73f5a879d1"
}
/***Request for an access token using a valid refresh token***/
reLogin() {
(async () => {
const resp = await fetch(AppRoutes.RELOAD_AUTH, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-Auth': this.getAuth().refreshToken
}
});
if (resp.status !== 200) {
this.doLogout();
}
const content = await resp.json();
const accessToken = content.access_token;
const tokenInfo = this.getDecodedAccessToken(accessToken); // decode token
const auth = new Auth();
auth.refreshToken = content.refresh_token;
auth.role = tokenInfo.auth[0];
const expireDate = tokenInfo.exp; // get token expiration dateTime
this.setAccessToken(accessToken);
this.setAuth(auth);
})();
}
I am new to Cognito (JWT tokens & whole auth thing in general) so pardon me for asking stupid questions. I am trying to use Cognito user pools with identity pools. I logged in a user using the default URL (https://testapi123.auth.us-east-2.amazoncognito.com/login?response_type=token&client_id=<>&scope=openid&redirect_uri=https://aws.amazon.com) and got a token. I am unable to figure out how to get the identity id from this token for use in getId() API. This I want to later use to get credentials from the federated identity pool (not sure if i have that part right either).
For reference, i have my code -
var AWS = require('aws-sdk');
var cognitoidentity = new AWS.CognitoIdentity({apiVersion: '2014-06-30'});
exports.handler = (event, context, callback) => {
// TODO implement
var params = {
IdentityPoolId: 'us-east-2:<xxxxxx>', /* required */
AccountId: 'xxxxxxx',
Logins: {
'cognito-idp.us-east-2.amazonaws.com/us-east-2_xxxxx': '<**identityID???**>',
}
};
cognitoidentity.getId(params, function(err, data) {
if (err) console.log('Error3 : ' + err, err.stack); // an error occurred
else {
console.log('retval:' + JSON.stringify(data)); // successful response
var idenId = data.idenId;
var params = {
IdentityId: idenId,
CustomRoleArn: 'arn:aws:iam::xxxxxxxxx:role/cc_admin',
Logins: {
'CognitoIdentity': 'cognito-idp.us-east-2.amazonaws.com/us-east-2_xxxxxxx'
}
};
cognitoidentity.getCredentialsForIdentity(params, function(err, data) {
if (err) console.log(err, err.stack); // an error occurred
else console.log(data); // successful response
});
}
});
callback(null, 'Hello from Lambda 1');
};
The error - "2018-06-06T18:59:58.614Z ce0fc216-69bb-11e8-bbfc-4fff0d953dd4 Error3 : NotAuthorizedException: Invalid login token. Token signature invalid. NotAuthorizedException: Invalid login token. Token signature invalid."
I have tried parsing the JWT token received (with jwt.io). It shows me some details but none of them seem to be identity id to be used in the request. I have also tried using the entire token as identity id.
Really need help. Thanks.
First, you only need to pass Identity Pool Id in params for getId function to work. It will return IdentityId associated with your identity pool. Replace
var params = {
IdentityPoolId: 'us-east-2:<xxxxxx>', /* required */
AccountId: 'xxxxxxx',
Logins: {
'cognito-idp.us-east-2.amazonaws.com/us-east-2_xxxxx': '<**identityID???**>',
}
};
with
var params = {
IdentityPoolId: 'us-east-2:<xxxxxx>'
}
Second, you can't create credentials unless you have idToken i.e JWT (JSON Web Token which is returned to client after successful authentication by user pool).
It looks like this..
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
You can get this token only by signing in...Run this command on terminal after configuring aws-cli or use aws-sdk and run function InitiateAuth
aws cognito-idp admin-initiate-auth --user-pool-id ap-south-1_xxxxxxx --client-id AAAAAAAAAAAAAAAAAAAAA --auth-flow ADMIN_NO_SRP_AUTH --auth-parameters USERNAME="abc#123.com",PASSWORD="********"
Finally,Change your params function passing to getCRedentials method 'Logins' key to:
Logins: {
"IdentityId": <result from getId>
"cognito-idp.us-east-2.amazonaws.com/us-east-2_xxxxxxx": <your idToken>
}