Lock for Web: Validating token for subsequent visits

Help
, , , ,
1

Hello,
I’ve implemented the Lock for Web (lock.min.js v10.4) for my JavaScript/jQuery application and it’s working great for logging in users. However, I currently need to figure out how to validate the token that gets returned so that I am able to verify a user’s subsequent visit to the application without making them log in each time they visit.

According to the above documentation, in order to do this I would want to use Token-Based Authentication by:

  1. Retrieving a JSON Web Token from the server
  2. Saving the JWT to the client-side, such as localStorage
  3. Subsequent requests should send the JWT as an additional Authorization header, which can then be decoded.

I’m already accomplishing the first 2 parts by retrieving the token via the ‘responseType’ of my Lock configuration (please see below example code) and storing the token in the browser’s localStorage…

lock = new Auth0Lock(
    CLIENT_ID,
    CLIENT_DOMAIN,
    {
        container: "login-content",
        allowedConnections: "Username-Password-Authentication"],
        auth: {
            responseType: "token"
        },
        socialButtonStyle: "big",
        languageDictionary: {"title":"Auth0"},
        language: "en",
        theme: {"primaryColor":"#3A99D8"}
    }
);

My question is around the 3rd step which is sending out a new request to validate the token. It’s not readily clear to me from the documentation where to send this token. I’ve found a list of Authorization APIs, as well as a piece of documentation that says I should create an API on my Dashboard and make any requests to this one.

I’ve tried the latter method, however, I wasn’t able to find much help with regards to how to set up the API. I am currently running everything locally, so I configured it’s Identifier as “http://localhost:9000/api/”. Any attempts at reaching this in Postman tell me that this does not exist, which is what I would expect.

Can anyone point me in the right direction or provide me with the correct next steps on how to successfully validate a user’s locally stored JWT after they have logged in?

Thank you,

-Mikey

2

To clarify, there is no Auth0 endpoint to “verify” a token. When a token is issued, it is signed with the relevant signing algorithm configured in Auth0. The step outlined in the post means that API calls made to your API should pass the token in the Authorization header. If you have secured your API through API Authorization features, your API will then attempt to validate the token from the authorization header using either the Client Secret (HS256 signing algorithm) or the public key (RS256).

This is of course assuming that you have an API which your SPA is interacting with (which is the point of SPA’s anyways). To summarize:

  1. You retrieve the id_token from Auth0
  2. Store the token in localStorage
  3. Read the token from localStorage. You can assume that this is valid and log the user in.
  4. Any actions that the user wishes to take (which I assume would be through making calls to your API), you pass the token in the Authorization header, and your API will validate the token.

I suggest reading through our API Authorization docs for more info on how to secure your APIs:

3

Thank you for the further reading! I’ll read deeper into the APIs. As I said, my initial tests using Postman to hit the API I created in my Auth0 Admin Dashboard did not appear to work, but I will continue to read the provided documentation.

I have implemented the following workflow using lock.getUserInfo which appears to be working. Does this sound right or are there any potential holes that we’ll need to implement APIs in order to resolve:

  1. User hits Application page for first time, is presented with Auth0 Lock UI
  2. lock.on(“authenticated”) will retrieve the user’s profile and assign their Access Token to localStorage. Simultaneously, private properties in the JS code will set the user to ‘loggedIn’ and load the application display
  3. When the user refreshes, or subsequently visits the page, the JS will first check for any Access Tokens in their browser’s localStorage.
  4. If an Access Token is found, then the JS will immediately attempt the following call:
    lock.getUserInfo(lbAccessToken, function(error, profile) { … }
  5. Provided there is no error, private properties in the JS code will set the user to ‘loggedIn’ and load the application display. Otherwise, the user will be set to ‘loggedOut’ and kept on the display for the lock UI.

Thank you,

-Mikey