Help us understand the problem. What is going on with this article?

[Next.js] Next-AuthのCustom ProviderでMicrosoft Graph Authを有効にする

概要

Next.jsを使って,OAuth認証をするには,Next-Authというパッケージの利用がとても便利なのですが,デフォルトでライブラリに同梱されている認証プロバイダーは,老舗の認証ライブラリであるPassportなどに比べると,まだまだ限定的です.

しかし,だからといってNext-Authが使えないわけではありません.本稿では,Next-AuthのCustom Providerという仕組みを使って,2020年8月現在Built-in Providerには含まれていない,Microsoft Graph Authを実現する方法を紹介します.

アプリの登録

事前に,Azure Portalの「Azure Active Directory」→「App Registration」から,新規アプリの追加を行います.この時点で,Application Id (Client Id)が発行されます.

Secretは,「Certificates & Secrets」メニューから生成します.

OauthのRedirect URLの設定が必要になりますので,「Authentication」メニューから,開発用のURLであるhttp://localhost:3000/api/auth/callback/microsoftを追加しておきましょう.

Scopeは必要なものを追加すればいいのですが,ここでは,User.Readのみとして進めます.

.env.localの準備

登録が終われば,認証のための準備として,.env.localファイルに先ほどつくったAppのIDやSecretを書いておきます,

// .env.local
NEXTAUTH_URL=http://localhost:3000/
MS_CLIENT_ID=xxx
MS_CLIENT_SECRET=xxx
MS_OAUTH_SCOPE="user.read"

ずばり設定

以下の設定を,pages/api/auth/[...nextauth].jsoptions.providersに追加します.

{
    id: "microsoft",
    name: "Microsoft",
    type: "oauth",
    version: "2.0",
    scope: process.env.MS_OAUTH_SCOPE!,
    params: { grant_type: "authorization_code" },
    accessTokenUrl: `https://login.microsoftonline.com/common/oauth2/v2.0/token`,
    authorizationUrl: `https://login.microsoftonline.com/common/oauth2/v2.0/authorize?response_type=code&response_mode=query`,
    profileUrl: "https://graph.microsoft.com/v1.0/me",
    profile: (profile: MicrosoftUser) => {
    return {
        id: profile.id ?? "",
        email: profile.userPrincipalName ?? "",
        name: profile.displayName ?? "",
        image: "https://graph.microsoft.com/v1.0/me/photo/$value",
    }
    },
    clientId: process.env.MS_CLIENT_ID!,
    clientSecret: process.env.MS_CLIENT_SECRET!,
}

少しだけ補足しておくと,今回は,tenantIDをcommonにすることで,MicrosoftアカウントおよびMicrosoft認証を使うすべてのwork/schoolアカウントでのログインを許可しています.詳しくは,こちら

Reactでの利用

あとは,以下のようなボタンをどこかにおいておけば,

<button onClick={signIn}>Sign in</button>

クリック後に,/api/auth/signinへと遷移し,プロバイダーとして,"Micosoft"の文字が出ているはずです.
無事に認証が終われば,Next-Authが提供する,useSessionフックを使って,ログインしているユーザーの情報を取得できます.

// pages/index.tsx
const Home: NextPage = () => {
  const [session, loading] = useSession()

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Welcome to Next-Auth!</h1>

        <>
          {session && (
            <>
              Signed in as {session.user.email} <br />
              <button onClick={signOut}>Sign out</button>
            </>
          )}
        </>
      </main>
    </div>
  )
}

export default Home

はい,それでは^^

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away