@teppen/react-auth

v0.1.2

Published

2 years ago

Library for integration with proprietary authentication apps, dedicated to react.

0High
0Medium
0Low

teppen

React 認証ライブラリ

独自認証アプリケーションを利用し、認証機能を組み込むためのフロントエンド用の認証ライブラリ。

ライブラリのセットアップ方法

1. ライブラリのインストール (初回のみ)

npm install @teppen/react-auth

2. 環境変数を設定する (初回のみ)

下記の環境変数を設定する。
Next.js の場合は、next.config.jsに環境変数を指定することで、環境変数を定義できる。

Next.js の場合の環境変数設定方法

/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    HOST_AUTH_APP: "localhost",
    PROTOCOL_AUTH_APP: "http",
  },
};

module.exports = nextConfig;

環境変数一覧

| 環境変数名 | 説明 | 必須 or 任意 | デフォルト値 | 例 | | ----------------- | ---------------------------------------------------- | ------------ | ------------- | ----------------------- | | HOST_RESOURCE_APP | 認証ライブラリを利用するアプリケーションのホスト名 | 必須 | - | nginx:81 | | HOST_AUTH_APP | 認証アプリのホスト名 | 必須 | - | authentication.test.com | | KEY_ACCESS_TOKEN | アクセストークン保存用のローカルストレージのキー | 任意 | access_token | access_token | | KEY_REFRESH_TOKEN | リフレッシュトークン保存用のローカルストレージのキー | 任意 | refresh_token | refresh_token | | PATH_REFRESH_PAGE | トークンリフレッシュ用のページのパス | 任意 | /refresh | /refresh | | PROTOCOL_AUTH_APP | 認証アプリの通信プロトコル | 任意 | https | http | | PORT_AUTH_APP | 認証アプリの通信ポート | 任意 | - | 8080 |

4. リフレッシュ用のページを追加

認証アプリとやり取りをして、トークンの設定やリフレッシュを行うページが必要となる。デフォルトでは、/refreshページがそのためのページとして扱わられる。
※ このページは環境変数にて変更は可能。

このページは以下の通り作成する必要がある。 ※ 今回は、Next.js の App Router を想定し、ファイルsrc/app/refresh/page.tsxに記載するものとする。

"use client";

import { RefreshPage } from "@teppen/react-auth";

export default RefreshPage;

ライブラリの利用方法

リソース API の呼び出し用関数

リソース API の呼び出し用に、3 つの Axios インスタンスを準備している。これらの使い方は一般的な Axios と同様である。

axiosPublic

認証なしの API を呼び出すための Axios インスタンス。
通常の Axios と使い方や動作は変わらない。

axiosPrivate

認証保護ありの API を呼び出すための Axios インスタンス。
自動で API とトークンのやり取りを実行する。

また、トークンの有効期限が切れている場合に、自動でリフレッシュを行う。
また、リフレッシュが失敗した場合に、自動でサインイン画面へ遷移する。

axiosPrivateNoRedirect

認証保護ありの API を呼び出すための Axios インスタンス。
自動で API とトークンのやり取りを実行する。

また、トークンの有効期限が切れている場合に、自動でリフレッシュを行う。
ただし、リフレッシュが失敗した場合は、それ以降のエラー対応を実施しない。(自動でサインイン画面に遷移しない)

未認証ユーザも利用するページでaxiosPrivateを利用すると、未認証ユーザは毎回サインイン画面に遷移させられてページの参照すらできない。
未認証ユーザも参照してよいページでは、axiosPrivateNoRedirectを利用することとなる。

サインイン画面へのリダイレクト

ユーザをサインイン画面に遷移させたい場合に利用するためのredirectSignInPage関数を準備している。
この関数を利用することで、認証アプリのサインイン画面へユーザを遷移させることができる。
(参考: axiosPrivateは内部でこの関数を利用している。)

もし、認証アプリ側で既にサインイン済みの場合は、自動でリダイレクトを数回したのち、リソースアプリ側も自動でサインイン状態となる仕様である。

認証済みユーザと未認証ユーザが利用するページを作成する場合

認証済みユーザと未認証ユーザの両方が利用するページの場合、認証ユーザのみに表示したい情報、未認証ユーザのみに表示したいコンポーネント等が発生しうる。

そのために、認証状態をページ全体で管理するために、AuthenticationProviderを利用する必要がある。

AuthenticationProviderを対象のページのレイアウトに組み込むことで、ページ全体で認証状態を管理することが可能。
Next.js の全てのページに適用した場合の例は以下の通り。(src/app/layout.tsx)

import { AuthenticationProvider } from "@teppen/react-auth";
import "./globals.css";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <AuthenticationProvider>{children}</AuthenticationProvider>
      </body>
    </html>
  );
}

これにより、ページ内の各コンポーネントにて、ライブラリで提供している以下のコンポーネントや関数を利用することが可能となる。

AuthenticationProvider 内で利用可能なコンポーネント

| コンポーネント | 説明 | | ---------------------- | ---------------------------------------------------------------------------------- | | SwitchBySignedInStatus | 認証済みユーザと未認証済みユーザで表示するコンポーネントを切り替えるコンポーネント | | DisplayOnlySignedIn | 認証済みユーザのみにコンポーネントを表示するコンポーネント | | DisplayOnlyNotSignedIn | 未認証ユーザのみにコンポーネントを表示するコンポーネント |

AuthenticationProvider 内で利用可能な関数

| 関数 | 説明 | 戻り値 | | ----------------- | ---------------------------------- | ------------------------------------------------- | | useAuthentication | 認証済みのユーザ情報を取得する関数 | signedIn: booleanpayload: TAccessTokenPayload |

認証済みユーザしか利用できないページを作成する場合

axiosPrivate関数を利用してリソース API のリクエストを実行することで、エラーコード 401が返ってきた場合に、自動的にリフレッシュ & サインイン画面へのリフレッシュが実行される。

AuthenticationProviderなどを利用することは必須ではない。
ただし、AuthenticationProviderとuseAuthenticationを利用することで、ユーザの認証情報を簡単に取得することも可能である。
※ useSWRGetUserInfoでも同じ情報を取得可能。この場合、AuthenticationProviderは不要