Link React App users to DB with token or user data?

Hello All,

I’m new to Auth0 and I really appreciate the friendliness of this community. I have a conceptual question. I have a React App which uses Node.js and Express on the backend. I am doing my Authentication on the front end using the SPA set up (I hope this is the right thing to do with a front and back end). I want to link my project with a SQL DB but I am not sure what the normal set up is.

My first idea is to have the user login with Auth0 and then use either the token that comes back or the “sub” value on the returned user object as the unique identifier for my DB (not sure if one is better than the other or if a third option would be best). So when ever the user object changes I would have a useEffect hook which would search the DB for either the token or sub and if it finds something in the DB it will return the user data. If it finds nothing it will create an entry.

Is this a typical way to link users with a DB and Auth0? I don’t want to run more queries than neccessary.

The value present in sub will be sourced from the user_id property of the user profile in Auth0. This is a stable value that you can use in your system as means to identify recurring users (https://auth0.com/docs/users/identify-users).

The actual tokens issued as part of authentication will be slightly different every time they are issued so you should NOT use the raw token value as an identifier. Instead you need to validate those tokens and then use information within them to identify users and link them to entities in your own system.

Thanks jmangelo! Is Auth0 able to reach out directly to my DB to tell it when to add a new user vs when to pull in the current users data? I am looking for an efficient method to trigger calls to my DB to either add users or get info.

It may depend on the situation, if you plan to only allow login through database connections (no social or other external providers) you could use a post-user registration hook (https://auth0.com/docs/hooks/extensibility-points/post-user-registration) to be informed when a new user has been registered.

However, given the hook only applies to certain connections possibly the best way would for your own application logic to handle that when receiving the login responses tokens. As in, if it received a login response token and the user id is not yet available then perform any first time user actions applicable for this particular application.

You could also consider rules (https://auth0.com/docs/rules - which will run for all connection types) as a means to perform certain actions once per unique user. Given rules execute for every login you would need to have extra logic (metadata flags) so that you know that for the current user first time user actions have already been completed and this is a recurring login.

From what you described I would likely manage this from the application to start with and once you get tokens you would check your DB to see if it’s the first time the user is seen in your system or not. Getting user information can be done either based on the information in the tokens you receive or by calling Management API from your backend.

Wow, thank you for this very thorough response, jmangelo!

I will take your advice and keep this feature within my own app logic. When a users successfully signs in with loginWithRedirect where is the user data being sent to initially? Can I chain .then() statements to my loginWithRedirect or will I need to design a useEffect hook to check for updated user data?

Thanks again for the help jmangelo.

Given that you will need to perform such actions from your backed you would need to get an access token to call your API (https://auth0.com/docs/quickstart/spa/react/02-calling-an-api#get-an-access-token). In that access token the user identifier will be available so that your backend can know who is the authenticated user associated with this call.