Re:Earthのユーザーセッションは、一般的なIDaaSプロバイダーであるAuth0で認証されます。

その仕組みについて

ログイン

ユーザーがRe:Earthのページにアクセスし、ログインボタンをクリックすると、ブラウザはAuth0がホストするログインポータルにリダイレクトされ、ユーザーはサインインすることができます。

成功と失敗

成功すると、JWT（JSON Web Token）がlocalstorageに保存され、バックエンドへのすべてのHTTPリクエストのAuthorizationヘッダーに挿入されます。

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}` } : {}),
      },
    };
  });

初回認証時やアクセストークンの有効性確認時にエラーが発生した場合、ユーザーは自動的にログアウトされ、Re:Earthのログインページに戻ります。

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コール

バックエンドへのAPIコールは、Apollo Clientによって管理されるGraphQLクエリおよびミューテーションを通じて処理されます。コールを行うユーザーが正しい権限を持っていることを確認するために、各リクエストにJWTを挿入するapollo-clientリンク設定を通じてリンクが作成されます。ここには、上記のリンクや他のリンクが作成されます。

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

完全なセットアップについては、src/gqlを参照して下さい。