How to access currently logged in user in node as server with SPA as client

[joeygate]

Hi. I’m new to auth0 and been reading a lot and done most of the tutorials that includes (vue and node as server)

Also, this vue quickstart is awesome to follow along. Everything went smoothly.

I’m trying to create a SPA game that enables users to trade, craft and have inventory of items.

My questions are

• Say, I wanted to post a newly crafted item on /api/craft/. How should I access the currently logged in user on the server side (node)? req.user does not contain the user profiles.Tho there’s a way to get the user on /userinfo endpoint. How should I approach this? Should I always get the user on /userinfo every time I need user’s info? Or should I just include the user from SPA to my server as part of the payload?

• When getting a access_token, it can be accessed by auth0Client.getTokenSilently, should I just use it every time I need a token? Or should I store the access token on localstorage since it can’t be hidden.

Please let me know your thoughts

[dan.woda]

@joeygate,

Welcome to the Auth0 Community Forum!

@joeygate

Say, I wanted to post a newly crafted item on /api/craft/ . How should I access the currently logged in user on the server side (node)? req.user does not contain the user profiles.Tho there’s a way to get the user on /userinfo endpoint. How should I approach this? Should I always get the user on /userinfo every time I need user’s info? Or should I just include the user from SPA to my server as part of the payload?

The user_id should be available in the access token. You can get the profile from /userinfo on the SPA side, then send the relevant user data as part of the payload, or you could call the userinfo endpoint from your API. This will likely come down to what data you need and when. If you are already calling the userinfo endpoint from the SPA then you could save yourself the second call by adding the data to the payload.

@joeygate

When getting a access_token , it can be accessed by auth0Client.getTokenSilently , should I just use it every time I need a token? Or should I store the access token on localstorage since it can’t be hidden.

We recommend that you do not store the token in localstorage. You should have the token in memory while the SPA is active, then you should use getTokenSilently when the SPA is refreshed/reopened.

Let me know if you have more questions.
Thanks,
Dan

[joeygate]

Thank you for the response. More clearer now.

@dan.woda

We recommend that you do not store the token in localstorage . You should have the token in memory while the SPA is active, then you should use getTokenSilently when the SPA is refreshed/reopened

One more thing, just need some validation from someone
Since I am using vue. I’ll store the access_token using vuex then in case of page refresh, I’ll have a mounted page cycle on my root page to getTokenSilently or show a loading screen while setting up the tokens necessary in memory.

Or please let me know if there’s a blog about this. It would be a great help. Thanks

[dan.woda]

I am not an expert on vue, but this sounds like a good solution.

According to the following post the getTokenSilently call should happen upon client init, checking for an existing session:

Login lost every time browser is reloaded

You can tell if you use the new Auth0 SPA JS by looking at your package.json. If it has a dependency on @auth0/auth0-spa-js then it’s the new SDK. If it just says auth0-js then it’s the old one. Did you look at the Angular Quickstart example (you can download a ready to go project as .zip and just run it via npm install and npm start. This is behaving exactly as you want and you can use it as reference. I just double checked: in the new SDK you actually don’t need to invoke getTokenSilently…

[joeygate]

Thank you so much for the help. I am able to move forward on my app now

I’d like to correct what I said above. It seems settings tokens on mounted page cycle does not work (or at least, what I did didn’t worked). I set tokens in App.vue then I need to get access_token in some child component to fetch some data. For some reason, it failed to get the access_token. As if they loaded at the same time or not sure why.

For now, what I settled in, is by adding lines of code to authGuard.js to make sure to set the tokens before entering a page

    if (authService.isAuthenticated) {
        // Added this
        const storeToken = store.getters.getToken
         
        if (!storeToken) {
            const token = await authService.getTokenSilently()
            store.dispatch('setToken', token)
        }
        // End here
        return next();
    }

I know this violates the SRP principle but this works as a temporary workaround. If someone know a better way. Please let me know.