React & Next.js に Azure Active Directory B2C (AADB2C) で超手軽に認証機能を実装しよう

はじめに

前提

• React & Next.js (TypeScript) を触ったことがある
• Azure のアカウントを持っている
• Azure Active Directory B2C のリソースを作成している（参考記事）

IDaaS の導入

AADB2C の導入

Microsoft Azure を選択する理由

AADB2C の設定手順

認証情報の設定

ユーザーフローの作成

ユーザーの作成

Next.js のプロジェクト準備

バージョン情報

• Node.js：16.13.1
• React：17.0.2
• Next.js：12.0.7
• @azure
  • msal-react：1.1.2
  • msal-browser：2.20.0

プロジェクト新規作成

# プロジェクト nextjs-aadb2c の作成（TypeScript）
yarn create next-app --typescript nextjs-aadb2c

cd nextjs-aadb2c
yarn dev

src ディレクトリの作成

ルートページのリセット

// src/pages/index.tsx
import type { NextPage } from 'next';

const Home: NextPage = () => {
  return <h1>React & Next.js と AADB2C の連携</h1>;
};

export default Home;

MSAL の導入

# msal-react のインストール
yarn add @azure/msal-react @azure/msal-browser

Config 　の設定

// src/lib/auth/config.ts
import { Configuration } from '@azure/msal-browser';

export const msalConfig: Configuration = {
  auth: {
    clientId: '34d76626-.............',
    authority: 'https://kikagakuapps.b2clogin.com/kikagakuapps.onmicrosoft.com/b2c_1_signin',
    knownAuthorities: ['kikagakuapps.b2clogin.com'],
    redirectUri: '/',
    postLogoutRedirectUri: '/',
  },
  cache: {
    cacheLocation: 'localStorage',
  },
};

export const loginRequest = {
  scopes: ['openid', 'offline_access'],
};

Provider の設定

// src/pages/_app.tsx
import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { msalConfig } from '../lib/auth/config';
import '../styles/globals.css';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  const pca = new PublicClientApplication(msalConfig);

  return (
    <MsalProvider instance={pca}>
      <Component {...pageProps} />
    </MsalProvider>
  );
}

export default MyApp;

ログインボタンの設定

// src/components/SigninBtn.tsx
import { useMsal } from '@azure/msal-react';
import { loginRequest } from '../lib/auth/config';

export default function SigninBtn(): JSX.Element {
  const { instance } = useMsal();
  return (
    <div>
      <button onClick={() => instance.loginRedirect(loginRequest)}>ログイン</button>
    </div>
  );
}

// src/pages/index.tsx
import type { NextPage } from 'next';
import SigninBtn from '../components/SigninBtn';

const Home: NextPage = () => {
  return (
    <>
      <h1>React & Next.js と AADB2C の連携</h1>
      <SigninBtn />
    </>
  );
};

export default Home;

ユーザーの状態を取得

// src/hooks/useCurrentUser.ts
import { AccountInfo } from '@azure/msal-browser';
import { useMsal } from '@azure/msal-react';

interface Account extends AccountInfo {
  idTokenClaims: {
    aud: string;
    auth_time: number;
    family_name: string;
    given_name: string;
    emails: string[];
    iss: string;
    nbf: number;
    nonce: string;
    sub: string;
    tfp: string;
    ver: string;
  };
}

export interface User {
  sub: string;
  familyName: string;
  givenName: string;
  email: string;
}

const useCurrentUser = (): User | null | undefined => {
  const { accounts } = useMsal();
  if (accounts.length > 0) {
    const account = accounts[0] as Account;
    const user: User = {
      sub: account.idTokenClaims?.sub,
      familyName: account.idTokenClaims?.family_name,
      givenName: account.idTokenClaims?.given_name,
      email: account.idTokenClaims?.emails[0],
    };
    return user;
  }
  return null;
};

export default useCurrentUser;

// src/pages/index.tsx
import type { NextPage } from 'next';
import SigninBtn from '../components/SigninBtn';
import useCurrentUser from '../hooks/useCurrentUser';

const Home: NextPage = () => {
  const user = useCurrentUser();
  console.log(user);
  return (
    <>
      <h1>React & Next.js と AADB2C の連携</h1>
      <SigninBtn />
    </>
  );
};

export default Home;

ログイン時にユーザー情報を表示

// src/pages/index.tsx
import type { NextPage } from 'next';
import { AuthenticatedTemplate, UnauthenticatedTemplate } from '@azure/msal-react';
import SigninBtn from '../components/SigninBtn';
import useCurrentUser from '../hooks/useCurrentUser';

const Home: NextPage = () => {
  const user = useCurrentUser();
  return (
    <>
      <h1>React & Next.js と AADB2C の連携</h1>

      <UnauthenticatedTemplate>
        <SigninBtn />
      </UnauthenticatedTemplate>

      <AuthenticatedTemplate>
        <p>
          こんにちは、{user?.familyName} {user?.givenName} さん
        </p>
        <p>メールアドレス：{user?.email}</p>
      </AuthenticatedTemplate>
    </>
  );
};

export default Home;

ログアウトボタン

// src/components/SignoutBtn.tsx
import { useMsal } from '@azure/msal-react';

export default function SigninBtn(): JSX.Element {
  const { instance } = useMsal();
  return (
    <div>
      <button onClick={() => instance.logout()}>ログアウト</button>
    </div>
  );
}

// src/pages/index.tsx
import type { NextPage } from 'next';
import { AuthenticatedTemplate, UnauthenticatedTemplate } from '@azure/msal-react';
import SigninBtn from '../components/SigninBtn';
import SignoutBtn from '../components/SignoutBtn';
import useCurrentUser from '../hooks/useCurrentUser';

const Home: NextPage = () => {
  const user = useCurrentUser();
  return (
    <>
      <h1>React & Next.js と AADB2C の連携</h1>

      <UnauthenticatedTemplate>
        <SigninBtn />
      </UnauthenticatedTemplate>

      <AuthenticatedTemplate>
        <p>
          こんにちは、{user?.familyName} {user?.givenName} さん
        </p>
        <p>メールアドレス：{user?.email}</p>
        <SignoutBtn />
      </AuthenticatedTemplate>
    </>
  );
};

export default Home;

おわりに

著者