Skip to main content

How users are authenticated

Re:Earth user sessions are authenticated with Auth0, a popular IDaaS provider.

How does it work

Login

When a user visits the Re:Earth page and clicks the login button, the browser is redirected to a login portal hosted by Auth0 where the user can sign in.

auth0 login page

Success and failure

On success, a JWT(JSON Web Token) will be stored in the localstorage and injected into the Authorization header on all HTTP requests to the back-end.

const authLink = setContext(async (_, { headers }) => {
// get the authentication token from local storage if it exists
const accessToken = window.REEARTH_E2E_ACCESS_TOKEN || (await getAccessTokenSilently());
// return the headers to the context so httpLink can read them
return {
headers: {
...headers,
...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
},
};
});

If an error occurs during the initial authorization or when checking the validity of the access token the user will be automatically logged out and will be returned to the Re:Earth login page.

const errorLink = onError(({ graphQLErrors, networkError }) => {
if (!networkError && !graphQLErrors) return;
const error = networkError?.message ?? graphQLErrors?.map(e => e.message).join(", ");
store.dispatch(localSlice.actions.set({ error }));
if (error) reportError(error);
});

API calls

API calls to the back-end are handled through GraphQL queries and mutations managed by Apollo Client. To make sure the user making the call has the correct authorization, a link is made through the apollo-client link setup that injects the JWT into each request. This is where the above to links as well as other links are made.

const client = new ApolloClient({
uri: endpoint,
link: ApolloLink.from([errorLink, sentryLink, authLink, uploadLink]),
cache,
connectToDevTools: process.env.NODE_ENV === "development",
});

See src/gql for the full setup.