NextAuth.jsで使える主要なプロバイダ一覧まとめ。

NextAuth.jsで、よく使われそうな主要なプロバイダをまとめました。

これでいろいろなSNSやWEBサービスのアカウントでユーザー登録できるようになります。

NextAuth.js

プロバイダを指定で編集するファイル

/pages/api/auth/[…nextauth].js のprovidersの中に記載していきます。

import NextAuth from "next-auth"

export default NextAuth({
    providers: [
        // ここにプロバイダを追加していきます。
        ...,
    ],
})

主要なプロバイダ一覧

プロバイダ名公式ドキュメントNextAuthページ
Applehttps://developer.apple.com/sign-in-with-apple/get-started/https://next-auth.js.org/providers/apple
Discordhttps://discord.com/developers/docs/topics/oauth2https://next-auth.js.org/providers/discord
Facebookhttps://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/https://next-auth.js.org/providers/facebook
GitHubhttps://developer.github.com/apps/building-oauth-apps/authorizing-oauth-appshttps://next-auth.js.org/providers/github
Googlehttps://developers.google.com/identity/protocols/oauth2https://next-auth.js.org/providers/google
Instagramhttps://developers.facebook.com/docs/instagram-basic-display-api/getting-startedhttps://next-auth.js.org/providers/instagram
LINEhttps://developers.line.biz/en/docs/line-login/integrate-line-login/https://next-auth.js.org/providers/line
Twitchhttps://dev.twitch.tv/docs/authenticationhttps://next-auth.js.org/providers/twitch
Twitterhttps://developer.twitter.com/https://next-auth.js.org/providers/twitter

Apple

プロバイダの公式ドキュメントhttps://developer.apple.com/sign-in-with-apple/get-started/
NextAuth.jsの詳細ページhttps://next-auth.js.org/providers/apple
import AppleProvider from "next-auth/providers/apple";

...
providers: [
    AppleProvider({
        clientId: process.env.APPLE_ID,
        clientSecret: process.env.APPLE_SECRET
    }),
    ...,
],
...

Discord

プロバイダの公式ドキュメントhttps://discord.com/developers/docs/topics/oauth2
NextAuth.jsの詳細ページhttps://next-auth.js.org/providers/discord
import DiscordProvider from "next-auth/providers/discord";

...
providers: [
    DiscordProvider({
        clientId: process.env.DISCORD_CLIENT_ID,
        clientSecret: process.env.DISCORD_CLIENT_SECRET
    }),
],
...

Facebook

プロバイダの公式ドキュメントhttps://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/
NextAuth.jsの詳細ページhttps://next-auth.js.org/providers/facebook
import FacebookProvider from "next-auth/providers/facebook";

...
providers: [
    FacebookProvider({
        clientId: process.env.FACEBOOK_CLIENT_ID,
        clientSecret: process.env.FACEBOOK_CLIENT_SECRET
    }),
],
...

GitHub

プロバイダの公式ドキュメントhttps://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps
NextAuth.jsの詳細ページhttps://next-auth.js.org/providers/github
import GitHubProvider from "next-auth/providers/github";

...
providers: [
    GitHubProvider({
        clientId: process.env.GITHUB_CLIENT_ID,
        clientSecret: process.env.GITHUB_CLIENT_SECRET
    }),
],
...

Google

プロバイダの公式ドキュメントhttps://developers.google.com/identity/protocols/oauth2
NextAuth.jsの詳細ページhttps://next-auth.js.org/providers/google
import GoogleProvider from "next-auth/providers/google";

...
providers: [
    GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET
    }),
],
...

Instagram

プロバイダの公式ドキュメントhttps://developers.facebook.com/docs/instagram-basic-display-api/getting-started
NextAuth.jsの詳細ページhttps://next-auth.js.org/providers/instagram
import InstagramProvider from "next-auth/providers/instagram";

...
providers: [
    InstagramProvider({
        clientId: process.env.INSTAGRAM_CLIENT_ID,
        clientSecret: process.env.INSTAGRAM_CLIENT_SECRET
    }),
],
...

Instagramでサインインを実装する場合には下記の記載が必要になります。

import { signIn } from "next-auth/react"

...
<button onClick={() => signIn("instagram")}>  // signInの中に"instagram"を記載
    Sign in
</button>

LINE

プロバイダの公式ドキュメントhttps://developers.line.biz/en/docs/line-login/integrate-line-login/
NextAuth.jsの詳細ページhttps://next-auth.js.org/providers/line
import LineProvider from "next-auth/providers/line";

...
providers: [
    LineProvider({
        clientId: process.env.LINE_CLIENT_ID,
        clientSecret: process.env.LINE_CLIENT_SECRET
    }),
],
...

Twitch

プロバイダの公式ドキュメントhttps://dev.twitch.tv/docs/authentication
NextAuth.jsの詳細ページhttps://next-auth.js.org/providers/twitch
import TwitchProvider from "next-auth/providers/twitch";

...
providers: [
    TwitchProvider({
        clientId: process.env.TWITCH_CLIENT_ID,
        clientSecret: process.env.TWITCH_CLIENT_SECRET
    }),
],
...

Twitter

プロバイダの公式ドキュメントhttps://developer.twitter.com/
NextAuth.jsの詳細ページhttps://next-auth.js.org/providers/twitter
import NextAuth from "next-auth"
import TwitterProvider from "next-auth/providers/twitter";

export default NextAuth({
    providers: [
        TwitterProvider({
            clientId: process.env.TWITTER_CLIENT_ID,
            clientSecret: process.env.TWITTER_CLIENT_SECRET
        }),
        ...,
    ],
})

その他

42 School, Amazon Cognito, Apple, Atlassian, Auth0, Authentik, Azure Active Directory, Azure Active Directory B2C, Battle.net, Box, BoxyHQ SAML, Bungie, Coinbase, Discord, Dropbox, EVE Online, Facebook, FACEIT, Foursquare, Freshbooks, FusionAuth, GitHub, GitLab, Google, IdentityServer4, Instagram, Kakao, Keycloak, LINE, LinkedIn, Mail.ru, Mailchimp, Medium, Naver, Netlify, Okta, OneLogin, Osso, Osu!, Patreon, Pipedrive, Reddit, Salesforce, Slack, Spotify, Strava, Trakt, Twitch, Twitter, United Effects, VK, WordPress.com, WorkOS, Yandex, Zoho, Zoom

出典:OAuth | NextAuth.js

コメント

コメントを残す

*