Re:Earth utilizes Auth0 as its authentication provider. Auth0 is a widely used IDaaS (Identity-as-a-Service) platform that provides a secure and reliable way to authenticate users.

How does it work

Login

When a user visits the Re:Earth page and clicks on the login button, they are redirected to a login portal hosted by Auth0. This login portal is a separate web page provided by Auth0 where users can securely sign in to their Re:Earth account.

Success and failure

After a successful login, a JWT(JSON Web Token) will be stored in the local storage 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 any errors occur during the initial authorization process or when validating the access token, the user will be automatically logged out. They will be redirected back to the Re:Earth login page to reauthenticate and resolve the issue. This ensures that the user's session remains secure and any authentication errors are handled appropriately.

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 made using GraphQL queries and mutations, which are managed by Apollo Client. To ensure that the user making the call has the necessary authorization, a link is set up in the apollo-client configuration. This link injects the JWT (JSON Web Token) into each request, along with any other required authentication information. This allows the back-end to verify the user's identity and permissions before processing the request.

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.