In SPA authentication, how does Auth0 remember that I'm logged in on page refresh?

Help
1

I’ve read The Complete Guide to React User Authentication with Auth0 and got everything working. Something I’m not clear on however is how Auth0 is able to fetch my token when I reload the page. How does it remember I am logged in? I was poking around the cookies and I only see something like auth0.<CLIENT_ID_HERE>.is.authenticated, but nothing that uniquely identifies me.

I see code and code_verifier in the request payload of POST /oauth/token but I have no idea where that data is stored so it can be used on subsequent page reloads.

What’s also interesting is that if I open my demo app in Incognito window, the session isn’t maintained between page reloads.

2

Hi @iamdtang

Thanks for contacting us at Auth0 Community.

I’ll go through how this works at a high level. As soon as the user (through the browser) starts interacting with the Auth0 domain (e.g., the first /authorize request), a “session” is created. The session basically ties the browser to some state stored on the Auth0 server side. This session is tied to the auth0 cookie on the client side and the browser will store that cookie. The content of the auth0 cookie is a reference to the session stored server-side. Every subsequent request from the browser to the Auth0 domain will include that auth0 cookie. This means that as long as the user uses the same browser, Auth0 will keep track of the user. The cookie have will not have your information but a pointer to the server side session which does have your information.

I hope this clarifies your question, you can read more about session and they relate in SPA’s here https://auth0.com/docs/users/sessions

Incognito mode can cause the cookie not to be sent in the request, I think these will be the third party cookie settings in the browser, you should be able to disable this in the browser settings.

3 Likes
3

Thank you for the detailed explanation. The section Keep the user logged in without a local session in the link you provided was also very helpful.

Do you know what data is being communicated from the hidden iframe to the SPA via postMessage?

4

Hey @iamdtang

The key thing about the data from the hidden iframe to the SPA is the response from the authorisation server, this will either be a new token or one of three error responses; login_required, consent_required or interaction_required, more info is here https://auth0.com/docs/login/configure-silent-authentication

The actual response with payload might look something like:

<!DOCTYPE html><html><head><title>Authorization Response</title></head><body><script type="text/javascript">(function(window, document) {var targetOrigin = "http://localhost:4000";var webMessageRequest = {};var authorizationResponse = {type: "authorization_response",response: {"error":"login_required","error_description":"Login required","state":"<some state value goes here>"}};var mainWin = (window.opener) ? window.opener : window.parent;if (webMessageRequest["web_message_uri"] && webMessageRequest["web_message_target"]) {window.addEventListener("message", function(evt) {if (evt.origin != targetOrigin)return;switch (evt.data.type) {case "relay_response":var messageTargetWindow = evt.source.frames[webMessageRequest["web_message_target"]];if (messageTargetWindow) {messageTargetWindow.postMessage(authorizationResponse, webMessageRequest["web_message_uri"]);window.close();}break;}});mainWin.postMessage({type: "relay_request"}, targetOrigin);} else {mainWin.postMessage(authorizationResponse, targetOrigin);}})(this, this.document);</script></body></html>
3 Likes
5

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.