On each request my application makes, a token is returned inside the response.
This is the token that needs to be used for the next request.
This works (partially). When I refresh the App it runs the restore function but uses the wrong token.
var Parent = this;
Ember.$(document).ajaxComplete(function(Event, Response) {
Parent.session.content.Token = Response.responseJSON.Token;
});
It would seem that the above code updates the token in memory but not in the store which the authenticator uses upon "restoring" the session using the restore function.
How can I update the token in the localStorage to use this token for all requests/re-validations?
You have to use Ember's set method so the session can detect that the Token has changed: session.set('token', Response.responseJSON.Token);.
Related
I am trying to use firebase authentication to get a google access token in order to call the youtube API.
I am able to initially get the access token like this:
const provider = firebase.auth.GoogleAuthProvider();
cosnt scopes = []; // ...scopes
scopes.forEach(scope => provider.addScope(scope));
firebase.auth().signInWithPopUp(provider)
.then(userCredentials=> {
const oauthCredentials = userCredentials.credentials;
// using credentials for API calls
axios.get("some-google-api-path", { params: { access_token: oauthCredentials.accessToken } }); // and so on...
});
This works fine until the access token expires.
As far as I can tell, it seems like firebase automatically refreshes the session, but I can find a way to get the new access token.
I tried:
firebase.auth().onAuthStateChange(user => {
// could not find the access token on the user object
});
And since that failed, I tried to do it manually using:
const token = firebase.auth.GoogleAuthProvider.credential(
oauthCredentials.idToken,
oauthCredentials.accessToken
);
const authResult = await firebase.auth().signInWithCredential(token);
The issue is that authResult will only contain the idToken or the accessToken, but not both, depends on what I give the firebase.auth.GoogleAuthProvider.credential function.
Am I missing something?
Is there another/better way to do it?
There are two tokens in play here:
The refresh token, which is only available after the user actively signs in. Since it doesn't change, you can cache this token - which is what the Firebase SDKs actually also do.
The ID token, which is available at any moment from the current user. This token expires in an hour, and is auto-refreshed by the Firebase SDKs.
So if you want to retain access to the refresh token, you will have to store (typically in local storage) yourself when the user first actively signs in.
So apparently firebase doesn't refresh tokens of other providers for you (not event google) according to this (thank you Frank van Puffelen!)
So what I did instead, is authenticate manually to google (since I use react, I used react-google-login), and got all tokens from there.
Then, once the session is initiated/refreshed, I create a firebase session using:
const token = firebase.auth.GoogleAuthProvider.credential(
oauthCredentials.idToken,
oauthCredentials.accessToken
);
const authResult = await firebase.auth().signInWithCredential(token);
I hope that this helps anyone, and I will accept another answer if firebase ever changes this.
When successfully logged in into the cognito user pool, I can retrieve access token and id token from the callback function as
onSuccess: function (result) {
var accesstoken = result.getAccessToken().getJwtToken()
var idToken = result.idToken.jwtToken
}
But how can I retrieve the refresh token? And how can I get a new token using this refresh token. I didnot find any clear answers.
You can use result.getRefreshToken().getToken() for that.
The success callback takes CognitoUserSession object i.e. result as a parameter which exposes getRefreshToken method to retrieve refresh token.
Refer this link for Cognito JavaScript SDK documentation -
https://github.com/aws/aws-amplify/tree/master/packages/amazon-cognito-identity-js
Not sure if I clearly understand your second question, but Use case 32 in above link might help you in dealing with it.
I'm using the access refresh jwt authentication flow and want the client to send a refresh token to get a new access token every 10 minutes after it received the access token. I also want to make sure that if the user closes their laptop for an hour and comes back to it that a new access token request is also sent. What is the best way to implement this behavior in React/redux, where the user will always have a valid access token and seamlessly keeps their "session" going?
To achieve that you can conditionnally check the expiration of the token before each request instead of setting a timer.
This will depend on the way you communicate with the server but the idea is to store client side the jwt token, his expiration and the refresh token (and his expiration too if needed) then use some sort of middleware before each request that need the auth :
const authClientMiddleware = (done) => {
if (new Date(localStorage.getItem('expiration')) <= new Date()) {
getNewToken(localStorage.getItem('refreshToken')).then(() => done()).catch(() => logout());
} else {
done();
}
}
I need to save jwt-token in local-storage through nodejs after the user has logged in (has been authorized ).
After I check if the user/password is correct in my controller - I save generated token in local storage. As it stands I can't reference window as it doesn't exists.
ReferenceError: window is not defined
This is how I'm currently trying to do it.
...
payload = {
sub: user.email,
role: user.role
};
token = jwt.sign(payload, jwtSecretKey, {expiresIn: '60m'});
window.localStorage.setItem('token', token);
res.status(200).render('index' , {
user: user,
token: token
});
...
You cannot save to localStorage on Node.js, but you can do it on a browser, possibly after sending from a server, for your case from a server on Node.js.
You should send the token from the server (running on Node.js) to the client (browser) which has a window object, having the localStorage and related getItem and setItem methods, you can reference from your JavaScript code for client (browser). Node.js does not have any window to reference. So, by referencing it in Node.js code is a ReferenceError hinting program code is referring to a thing that is not defined, undefined, you have encountered.
Just put it into a cookie and send, or send it via a json response. Then on the client browser save it into window.localStorage.
following is the examples code for the latter way; sending via a response:
// SERVER-SIDE Code
// say `app` is your app server on node.js
// this is a url handler on your server-side code
// you just have sent your user credentials from a browser
// typically via a form in the body of your http request
app.post('/auth', function (req, res) {
// you may have here some jwt token creation things
// ...
// and send it as your response to the client (probably a web browser) ..
// with your prefrred name as the key, say 'my_token', ..
// where you will save it to localStorage (ie. window.localStorage)
res.json({my_token: 'asdfgh-anything-jw-token-qwerty'})
})
// CLIENT-SIDE Code (may be a web browser)
// You have just sent a request to the server..
// ..with user credentials for authentication in the request body
// in the request body may be a window.FormData object or a json etc.
http.post('auth', userCredentials)
// probably the request mechanism you make http..
// ..requests asynchronously, maybe using a library,..
// ..will return a Promise, and you will have a similar code below.
.then(response => response.json())
.then(responseJson => {
// set localStorage with your preferred name,..
// ..say 'my_token', and the value sent by server
window.localStorage.setItem('my_token', responseJson.my_token)
// you may also want to redirect after you have saved localStorage:
// window.location.assign("http://www.example.org")
// you may even want to return responseJson or something else or assign it to some variable
// return responseJson;
})
If you mean html 5 localStorage, there's no such a thing since node.js is a server-side technology. Html 5 localStorage is a client side feature supported
refer How to access localStorage in node.js?
In the client call to /login use xmlhttpresponse object, then add an event listener for 'load'. This will give the client the responseObject where you have added the token. Then in the event listener put your localStorage code
I'm making an OAuth2 call from my ASP.NET MVC web application to my Web API through JavaScript to authenticate my user and get a token. The Web API accesses a SQL Server database where the user's login is stored using Identity and the typical AspNetUsers tables. My API call returns a 20 min access token and a 2 week refresh token. The API and consuming apps are products that we are developing that our customers will register with. In other words, all the code is on our side.
I know I must refresh the access token before it expires by passing the API the refresh token. My question is...where do I store the access and refresh tokens on the client for use in my JavaScript to make subsequent API calls or to refresh the token? People online are saying that storing anything client-side is bad, cookies are unsecure, etc and without offering any solutions. Local storage? But of course these are Ajax calls in JavaScript that we are making to the API, so the tokens needs to exist somewhere on the client side! It's driving me crazy trying to figure this out. I know I need to at least use HTTPS.
I'd suggest you to create a table in database to store the refresh token and access token.
Table structure will look like below
ID,Access_Token,Refresh_Token,LastUpdated_Time
Whenever you're calling a API with access token , please check the current time and LastUpdated_Time of token , if it is more than one hour your token will become invalid, so you need to get another valid token using your refresh token.
In my application , I had 55 minutes lifespan of toke, after that time token gets invalid.
Code
if (dateTimeDiff > 55) {
var request = (HttpWebRequest) WebRequest.Create("https://www.googleapis.com/oauth2/v3/token");
var postData = "refresh_token=your refresh token";
postData += "&client_id=your client id";
postData += "&client_secret=your client secret";
postData += "&grant_type=refresh_token";
var data = Encoding.ASCII.GetBytes(postData);
request.Method = "POST";
request.ContentType = "application/x-www-form-urlencoded";
request.ContentLength = data.Length;
request.UseDefaultCredentials = true;
using(var stream = request.GetRequestStream()) {
stream.Write(data, 0, data.Length);
}
var response = (HttpWebResponse) request.GetResponse();
string responseString = new StreamReader(response.GetResponseStream()).ReadToEnd();
}
The response will contain new access token, don't forget to update your table with LastUpdated_Time and new token.
The auth token is something that you can always obtain using the refresh token. So, have an interceptor that validates the incoming and outgoing requests and store the auth-token there. Coming to the refresh-token, in our application we were initially storing in cookies, later moved to local storage.
You can tried to store the token on the localStorage, what I am doing right now is(I am using typescript and react, but I think it will give a clue for your web app):
const msg = await login({ ...values, type });
let accessToken = msg.accessToken;
window.localStorage.setItem("x-access-token", accessToken);