React Native app logs out when jwt refresh token is not expired - javascript

I am using the JWT token to verify my API requests. Access token expires in 1 minute, and refresh token expires in 1 year. After the access token expires, an API request is sent with a refresh token to get a new set of tokens. A new set of tokens are only sent if the refresh token is valid, and exists in the database. I am using Axios interceptor to achieve this. Everytyhing seems to work fine for some time. However, it logs me out even when the refresh token is valid and does exist in DB. I am assuming I am missing something in Axios interceptor or has to do with async functions.
Error logs "code does not match" in server-side at verifyRefreshToken function, and "Error here" in client-side updateToken function.
CLIENT SIDE CODE
API.js
// Response interceptor for API calls
API.interceptors.response.use((response) => {
return response
}, async (error) => {
// reject promise if network error
if (!error.response) {
console.log("Network Error");
return Promise.reject(error);
}
const originalRequest = error.config;
console.log(store.getState().auth)
// if access token is expired
if (error.response.status === 403 && error.response.data.message == "token expired") {
// var refreshToken = await getRefreshToken() // get refresh token from local storage
var refreshToken = await store.getState().auth.refreshToken
// restore tokens using refresh token
await store.dispatch(await updateToken(refreshToken)) // get new set of tokens from server and store tokens in redux state
// var newAccessToken = await getToken() // get token from local storage
var newAccessToken = await store.getState().auth.accessToken
if(newAccessToken != null){
originalRequest.headers["Authorization"] = `Bearer ${newAccessToken}`;
return API(originalRequest)
}
return Promise.reject(error);
}
// if refresh token is expired or does not match
if (error.response.status === 403 && error.response.data.message == "false token") {
socketDisconnect() // disconnect socket connection
signOut() // remove tokens from local storage
store.dispatch(logOut()) // set tokens in redux as null
return Promise.reject(error);
}
return Promise.reject(error);
});
updateTokenFunction
export const updateToken = (rt) => {
return async (dispatch) => {
const data = await API.post('/auth/refreshToken', {
token: rt
})
.then(async res => {
var accessToken = res.data.accessToken
var refreshToken = res.data.refreshToken
await storeToken(accessToken) // store access token in local storage
await storeRefreshToken(refreshToken) // store refresh token in local storage
dispatch(restoreToken({accessToken, refreshToken})) // store token in redux state
})
.catch(err => {
console.log("err here" + err) // LOG SHOWS ERROR HERE
})
}
}
SERVER SIDE CODE
// /auth/refreshToken
// POST: /api/auth/refreshToken
router.post('/', (req, res) => {
var { token } = req.body
if(!token) res.status(403).send({"status":false, "message": "false token", "result": ""})
verifyRefreshToken(token)
.then(async data => {
var userName = data.userName
// get new tokens
var accessToken = await getAccessToken(userName)
var refreshToken = await getRefreshToken(userName)
res.json({"status":true, "message": "token verified", "accessToken": accessToken, "refreshToken": refreshToken})
})
.catch(err => {
console.log(err);
res.status(403).send({"status":false, "message": "false token", "result": ""})
})
});
To generate new refresh token
// generate refresh token
const getRefreshToken = (userName) => {
return new Promise((resolve, reject) => {
var secret = process.env.REFRESH_TOKEN_SECRET
var options = { expiresIn: '1y' }
jwt.sign({userName},secret , options, (err, token) => {
if(err) reject("error")
var data = {"userName": userName, "token": token}
// delete all expired token from database
dbQueries.deleteRefreshToken(data, result => {
})
// add refresh token to database
dbQueries.addRefreshToken(data, result => {
if(result == "success"){
console.log("added token " + token);
resolve(token)
}else{
reject("failure")
}
})
});
})
}
Verifying refresh token
// verify access token
const verifyRefreshToken = (token) => {
return new Promise((resolve, reject) => {
var secret = process.env.REFRESH_TOKEN_SECRET
if(!token) return reject("no token")
jwt.verify(token, secret, (err, user) => {
if(err){
return reject(err)
}
// check if the verified token and token from database matches
var data = {"userName": user.userName}
dbQueries.getRefreshToken(data, result => {
if(result.length == 0){
return reject("no data")
}
if(token === result[0].token){
resolve(user)
} else{
reject("code does not match") // LOGS THIS ERROR
}
})
})
})
}

UPDATE
The error was due to multiple API calls at the same time, and all had requested for a new access token, with old refresh tokens. I solved the issue using code in this link.

Related

JWT auth process - frontend part

Im making a user authorization process with JWT tokens.
How does the flow look like?
User logs in - gets an access token and a refresh token from a server, as a response
Access token comes in json body and is saved in local storage. Refresh token comes in a httpOnly cookie.
User can use getAllUsers method untill access token is valid.
Whenever getAllUsers method returns 401 unauthorized (when access token expires), there is a request being sent to refresh token endpoint - getRefreshToken, which returns new access token that is being saved to local storage
Refresh token expires and user is being logged out.
Whole flow in Postman works but i have got problem at frontend side.
Function getAllUsers works until access token expires.
Thats why I made a global function in a util file that checks if a response is 401 and if so, it sends a request to get a new access token and calls a function which returned that error.
However it does not work.
I think that the problem is in getAllUsers function which immediately goes to catch block (when cant fetch list of users because of 401) and does not invoke that global function from util file. Console logs from both functions (getDataFromResponse, getRefreshToken) does not work so it does not even get there.
Any ideas??
API utils file
import { AxiosResponse } from "axios";
import { apiService } from "./api.service";
type ApiServiceMethods = keyof typeof apiService;
export const getDataFromResponse = async (
response: AxiosResponse,
funName: ApiServiceMethods,
...args: any
): Promise<any> => {
if (response.status === 401) {
console.log("error");
await apiService.getRefreshToken();
return await apiService[funName](args);
}
return response.data;
};
API Service:
import { getDataFromResponse } from "./api.utils";
import axios from "./axios";
type LoginArgs = {
password: string;
username: string;
};
const apiServiceDef = () => {
const login = async (args: LoginArgs) => {
try {
const response = await axios.post("/login", {
username: args.username,
password: args.password,
});
const { data } = response;
const { token } = data;
localStorage.setItem("accessToken", token);
return response;
} catch (e) {
throw new Error("Custom");
}
};
/* problem here */
const getAllUsers = async () => {
const Token = localStorage.getItem("accessToken");
try {
const response = await axios.get("/users", {
headers: {
Token,
},
});
return await getDataFromResponse(response, "getAllUsers");
} catch (e) {
console.log(e);
}
};
/* problem here */
const getRefreshToken = async () => {
try {
console.log("fetch new access token");
const response = await axios.get("/refreshToken");
if (response.status === 401) {
localStorage.removeItem("accessToken");
throw new Error("TokenExpiredError");
}
const { data } = response;
const { token } = data
localStorage.setItem("accessToken", token);
return response;
} catch (e) {
console.log(e);
}
};
return { login, getRefreshToken, getAllUsers };
};
export const apiService = apiServiceDef();
I usually use a wrapper around the async functions or just use axios interceptors (https://stackoverflow.com/a/47216863/11787903). Be sure that err.response.status is right property, not sure about that, but this solution should work for you.
const asyncWrapper = async (handler) => {
try {
return handler()
} catch (err) {
if (err.response.status === 401) {
// refresh token then again call handler
await refreshToken()
return handler()
}
}
}
const getAllUsers = asyncWrapper(() => {
const Token = localStorage.getItem("accessToken");
return axios.get("/users", {
headers: {
Token,
},
});
});

await is only valid in async functions and the top level bodies of modules javascript express error

This code is to verify firebase authentication. Firstly, it checks the req.headers.Then retrieve uid from the token. After the decodedToken.uid is received, the code will check with its own MySQL database to obtain the id of the user using getID(uid) function. If the uid is not in the database, it will create a new user using the function makeNewUser(). When executed, the code returns an error of "await is only valid in async functions and the top level bodies of modules". How can I fix this? Should I make a new file to handle that stuff and the return from this code should be stored in res.locals? Here is the code.
const admin = require('./config/firebaseAuth'); // import admin from firebase initializeApp
const getId = require('../utils/getUserID'); // module to get userId form MySQL database
const makeNewUser = require('../utils/makeNewUser'); // module to make a new user into MySQL database
class Middleware {
async decodeToken(req,res,next) {
// get authorization from the headers
const { authorization } = req.headers;
// check if the authorization headers are well configured
// this includes checking if headers.authorization exist
// then if the format in headers.authorization matches with the configured
if (!authorization) return res.status(403).json({
status: 'fail',
type: 'server/missing-authorization',
message: 'Missing req.headers.authorization on request to the server. This is need for authorization!'
})
else if (!authorization.startWith('Bearer')) return res.status(400).json({
status: 'fail',
type: 'server/missing-bearer',
message: 'Missing Bearer in req.headers.authorization on request to the server. This is needed to extract the token!'
})
else if (authorization.split(' ').length !== 2) return res.status(400).json({
status: 'fail',
type: 'server/bearer-unrecognized',
message: 'Bearer in req.headers.authorization is not well configured. This is need to extract the token!'
})
// after passing the authorization header checks, now checks the token
const token = authorization.split(' ')[1]; // req.headers = {"Bearer $.token"}
admin.auth().verifyIdToken(token)
.then((decodedToken) => {
const {uid, name} = decodedToken; // get uid and name from the token
try {
// !this produces an error: await is only valid in async functions and the top level bodies of modules
const result = await getId(uid); // getId to get the id of the user regarding the uid
// check if exist uid in the database
if (result.length < 1) {
// if not make a new user
const result = await makeNewUser(uid, name); // make new user from the given uid and name
const id = result.insertId; // get the id of the new user
req.user = {id: id, name: name}; // set id and name to req.user
return next();
}
const id = result[0].id; // getId to get the id of the user from the result query since uid exist
req.user = {id: id, name: name}; // set id and name to req.user
return next();
} catch (err) {
return res.status(500).json({
status: 'fail',
type: 'database/fail-to-query',
message: err.message
})
}
})
.catch((err) => {
/*
on err for firebase tokens, such as sent was FMC token instead of id token or token has expired and many others!
err response: after executing console.log(err)
{
errorInfo: {
code: 'auth/argument-error',
message: 'Decoding Firebase ID token failed. Make sure you passed the entire string JWT which represents an ID token. See https://firebase.google.com/docs/auth/admin/verify-id-tokens for details on how to retrieve an ID token.'
},
codePrefix: 'auth'
}
or
{
errorInfo: {
code: 'auth/id-token-expired',
message: 'Firebase ID token has expired. Get a fresh ID token from your client app and try again (auth/id-token-expired). See https://firebase.google.com/docs/auth/admin/verify-id-tokens for details on how to retrieve an ID token.'
},
codePrefix: 'auth'
}
*/
if (err.errorInfo.code === 'auth/internal-error') var statusCode = 500;
else var statusCode = 400;
return res.status(statusCode).json({status: "fail", type: err.errorInfo.code, message: err.errorInfo.message}); // return with status codes
})
}
}
module.exports = new Middleware();
Notes: getId and makeNewUser returns a promise!
use this
const admin = require('./config/firebaseAuth'); // import admin from firebase initializeApp
const getId = require('../utils/getUserID'); // module to get userId form MySQL database
const makeNewUser = require('../utils/makeNewUser'); // module to make a new user into MySQL database
class Middleware {
async decodeToken(req,res,next) {
// get authorization from the headers
const { authorization } = req.headers;
// check if the authorization headers are well configured
// this includes checking if headers.authorization exist
// then if the format in headers.authorization matches with the configured
if (!authorization) return res.status(403).json({
status: 'fail',
type: 'server/missing-authorization',
message: 'Missing req.headers.authorization on request to the server. This is need for authorization!'
})
else if (!authorization.startWith('Bearer')) return res.status(400).json({
status: 'fail',
type: 'server/missing-bearer',
message: 'Missing Bearer in req.headers.authorization on request to the server. This is needed to extract the token!'
})
else if (authorization.split(' ').length !== 2) return res.status(400).json({
status: 'fail',
type: 'server/bearer-unrecognized',
message: 'Bearer in req.headers.authorization is not well configured. This is need to extract the token!'
})
// after passing the authorization header checks, now checks the token
const token = authorization.split(' ')[1]; // req.headers = {"Bearer $.token"}
admin.auth().verifyIdToken(token)
.then( async (decodedToken) => {
const {uid, name} = decodedToken; // get uid and name from the token
try {
// !this produces an error: await is only valid in async functions and the top level bodies of modules
const result = await getId(uid); // getId to get the id of the user regarding the uid
// check if exist uid in the database
if (result.length < 1) {
// if not make a new user
const result = await makeNewUser(uid, name); // make new user from the given uid and name
const id = result.insertId; // get the id of the new user
req.user = {id: id, name: name}; // set id and name to req.user
return next();
}
const id = result[0].id; // getId to get the id of the user from the result query since uid exist
req.user = {id: id, name: name}; // set id and name to req.user
return next();
} catch (err) {
return res.status(500).json({
status: 'fail',
type: 'database/fail-to-query',
message: err.message
})
}
})
.catch((err) => {
/*
on err for firebase tokens, such as sent was FMC token instead of id token or token has expired and many others!
err response: after executing console.log(err)
{
errorInfo: {
code: 'auth/argument-error',
message: 'Decoding Firebase ID token failed. Make sure you passed the entire string JWT which represents an ID token. See https://firebase.google.com/docs/auth/admin/verify-id-tokens for details on how to retrieve an ID token.'
},
codePrefix: 'auth'
}
or
{
errorInfo: {
code: 'auth/id-token-expired',
message: 'Firebase ID token has expired. Get a fresh ID token from your client app and try again (auth/id-token-expired). See https://firebase.google.com/docs/auth/admin/verify-id-tokens for details on how to retrieve an ID token.'
},
codePrefix: 'auth'
}
*/
if (err.errorInfo.code === 'auth/internal-error') var statusCode = 500;
else var statusCode = 400;
return res.status(statusCode).json({status: "fail", type: err.errorInfo.code, message: err.errorInfo.message}); // return with status codes
})
}
}
module.exports = new Middleware();

How to create session in nodejs + react

I am working on react front end app and middleware is written in nodejs. I am using oauth access token which expires in 3600 ms so i need to create session for 7 days so user wont be logout before 7 days.
What is the way to create session ? Do I need to do in react app or node js app ?
PS We do not wat to implement refresh token approach. Any way to setup session and valid for 7 days ?
You can use an access token + refresh token to achieve this.
Use shorter access tokens and keep 7d expiry for the refresh token.
Upon the expiry of the access token, you can refresh it by passing the refresh token. This will work till your refresh token expiry is 7 days. Then the user has to log in again.
Something like the following.
export const generateAccessToken = (user: UserResponse): string => {
return jwt.sign(
{
userId: user.user_id,
clientId: user.client_id,
createdAt: new Date().getTime(),
storageKey: user.storageKey ?? "",
pipelineKey: user.pipelineKey ?? "",
},
process.env.ACCESS_TOKEN_SECRET,
{ expiresIn: `3600s` }
);
};
export const generateRefreshToken = async (
user: UserResponse
): Promise<string> => {
const refreshTOken = jwt.sign(
{
userId: user.user_id,
},
process.env.REFRESH_TOKEN_SECRET,
{ expiresIn: `7d` }
);
const status = await storeRefreshToken(user.user_id, refreshTOken);
if (status) {
return refreshTOken;
} else {
throw new Error("Error while storing refresh token");
}
};
refresh-token endpoint would be something like this
authRouter.post("/refresh-token", async (request: any, response: any) => {
await transformAndValidate(RefreshTokenRequestDto, request.body)
.then(async (refreshTokenRequest: any) => {
if (authenticateRefreshToken(refreshTokenRequest.refreshToken)) {
const dbRefreshToken = await getRefreshTokenByToken(
refreshTokenRequest.refreshToken
);
if (
dbRefreshToken &&
dbRefreshToken.user_id &&
dbRefreshToken.active &&
dbRefreshToken.expiry_at >= new Date()
) {
const user = await getUserById(dbRefreshToken.user_id);
if (user) {
const jwtToken = generateAccessToken(user);
response.status(200).send(
generateSuccessResponse({
accessToken: jwtToken,
refreshToken: dbRefreshToken.token,
fullName: user.username,
})
);
} else {
return response
.status(400)
.json(
generateFailedResponse(
"Invalid User",
AppCodes.REFRESHTOKENFAIL
)
);
}
} else {
return response
.status(400)
.json(
generateFailedResponse(
"Refresh Token Failed",
AppCodes.REFRESHTOKENFAIL
)
);
}
} else {
return response
.status(400)
.json(
generateFailedResponse(
"Refresh Token JWT Validation Failed",
AppCodes.REFRESHTOKENFAIL
)
);
}
})
.catch((err) => {
response
.status(400)
.json(
generateFailedResponse(
formatValidationErrorMsg(err),
AppCodes.VALIDATIONFAILED
)
);
});
});

408 timeout from Firebase Cloud Messaging after the message

I'm sending push messages using FCM through Firebase Functions. The messages are being sent properly, but I'm getting the 408 time-out error after the message is sent. I'm suspecting it might have to do with the unregistered tokens not being cleaned up because:
if I were to send another message to the same device, the same timeout occurs and
the only error message I get from the Firebase log is Function execution took 60002 ms, finished with status: 'timeout'.
exports.sendMessage = functions.https.onRequest(async (request, response) => {
const {
sender,
recipient,
content,
docID
} = request.body
functions.logger.log(
"docID:",
docID,
);
// Get the list of device notification tokens.
let deviceTokens; let ref;
try {
ref = admin.firestore().collection("deviceToken").doc(recipient);
const doc = await ref.get();
if (!doc.exists) {
console.log("No such document!");
response.status(500).send(e)
} else {
console.log("doc.data():", doc.data());
deviceTokens = doc.data().token;
}
} catch (e) {
response.status(500).send(e)
}
let senderProfile;
try {
senderProfile = await admin.auth().getUser(sender);
console.log("senderProfile", senderProfile);
} catch (e) {
console.log(e);
response.status(500).send(e)
}
// Notification details.
let payload = {
notification: {
title: senderProfile.displayName,
body: content,
sound: "default",
},
data: {
uid: senderProfile.uid,
displayName: senderProfile.displayName,
docID,
messageType: "status"
}
};
functions.logger.log(
"deviceTokens", deviceTokens,
"payload", payload,
);
// Send notifications to all tokens.
const messageResponse = await admin.messaging().sendToDevice(deviceTokens, payload);
// For each message check if there was an error.
messageResponse.results.forEach((result, index) => {
const error = result.error;
if (error) {
functions.logger.error(
"Failure sending notification to",
deviceTokens[index],
error,
);
// Cleanup the tokens who are not registered anymore.
if (error.code === "messaging/invalid-registration-token" ||
error.code === "messaging/registration-token-not-registered") {
const updatedTokens = deviceTokens.filter((token) => token !== deviceTokens[index]);
console.log("updatedTokens", updatedTokens);
ref.update({
token: updatedTokens,
})
.catch(function(e) {
console.error("Error removing tokens", e);
response.status(500).send(e)
});
}
}
});
response.status(200)
});
I'm unsure why the following isn't cleaning up the unregistered tokens:
const updatedTokens = deviceTokens.filter((token) => token !== deviceTokens[index]);
ref.update({
token: updatedTokens,
})
You always have to end HTTP functions with response.status(200).send() or response.status(200).end(). In the above function, you have response.status(200) so you have to end it either with response.status(200).send() or response.status(200).end(). Please check the documentation if it helps.

firebase authentication: signInWithCustomToken and createSessionCookie - error auth/invalid-id

I am trying to implement a login mechanism using Firebase custom token and session cookies, for sure I am doing something wrong but I cannot figure it out.
I will put my code and then explain how I am using it to test it.
Frontend code
const functions = firebase.functions();
const auth = firebase.auth();
auth.setPersistence(firebase.auth.Auth.Persistence.NONE);
auth.onAuthStateChanged((user) => {
if (user) {
user.getIdToken()
.then((idToken) => {
console.log(idToken);
});
}
});
function testCustomLogin(token) {
firebase.auth().signInWithCustomToken(token)
.then((signInToken) => {
console.log("Login OK");
console.log("signInToken", signInToken);
signInToken.user.getIdToken()
.then((usertoken) => {
let data = {
token: usertoken
};
fetch("/logincookiesession", {
method: "POST",
body: JSON.stringify(data)
}).then((res) => {
console.log("Request complete! response:", res);
console.log("firebase signout");
auth.signOut()
.then(()=> {
console.log("redirecting ....");
window.location.assign('/');
return;
})
.catch(() => {
console.log("error during firebase.signOut");
});
});
});
})
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode, errorMessage);
});
}
Backend code
app.post('/logincookiesession', (req, res) => {
let token = req.body.token;
// Set session expiration to 5 days.
const expiresIn = 60 * 60 * 24 * 5 * 1000;
// Create the session cookie. This will also verify the ID token in the process.
// The session cookie will have the same claims as the ID token.
// To only allow session cookie setting on recent sign-in, auth_time in ID token
// can be checked to ensure user was recently signed in before creating a session cookie.
admin.auth().createSessionCookie(token, {expiresIn})
.then((sessionCookie) => {
// Set cookie policy for session cookie.
const options = {maxAge: expiresIn, httpOnly: true, secure: true};
res.cookie('session', sessionCookie, options);
res.end(JSON.stringify({status: 'success'}));
})
.catch((error) => {
res.status(401).send('UNAUTHORIZED REQUEST!' + JSON.stringify(error));
});
});
app.get('/logintest', (req, res) => {
let userId = 'jcm#email.com';
let additionalClaims = {
premiumAccount: true
};
admin.auth().createCustomToken(userId, additionalClaims)
.then(function(customToken) {
res.send(customToken);
})
.catch(function(error) {
console.log('Error creating custom token:', error);
});
});
so basically what I do is
execute firebase emulators:start
manually execute this on my browser http://localhost:5000/logintest , this gives me a token printed in the browser
Then in another page, where I have the login form, I open the javascript console of the browser and I execute my javascript function testCustomLogin and I pass as a parameter the token from step 2.
in the network traffic I see that the call to /logincookiesession return this:
UNAUTHORIZED REQUEST!{"code":"auth/invalid-id-token","message":"The provided ID token is not a valid Firebase ID token."}
I am totally lost.
I can see in the firebase console, in the Authentication section that user jcm#email.com is created and signed-in, but I cannot create the session-cookie.
Please,I need some advice here.
The route for creating the cookie session had an error.
It should start like this.
app.post('/logincookiesession', (req, res) => {
let params = JSON.parse(req.body);
let token = params.token;
And the code I used was from a manual, OMG. I hope this helps someone too.

Categories