NextAuth.jsで使える主要なプロバイダ一覧まとめ。
2022/6/8
2022/6/8
NextAuth.jsで、よく使われそうな主要なプロバイダをまとめました。
これでいろいろなSNSやWEBサービスのアカウントでユーザー登録できるようになります。
プロバイダを指定で編集するファイル
/pages/api/auth/[…nextauth].js のprovidersの中に記載していきます。
import NextAuth from "next-auth"
export default NextAuth({
providers: [
// ここにプロバイダを追加していきます。
...,
],
})主要なプロバイダ一覧
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
}),
],
...| プロバイダの公式ドキュメント | 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
}),
],
...| プロバイダの公式ドキュメント | 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
}),
],
...| プロバイダの公式ドキュメント | 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
}),
],
...| プロバイダの公式ドキュメント | 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
最近の記事
音楽生成AI「Suno」の使い方まとめ！作詞作曲が簡単にできる？
簡単に曲が作れるAIということでよく聞く「Suno（Chirp）」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
【Open AI】APIの料金まとめ｜GPT・DALL·E・Whisperなど
Open AIのAPI（一部）の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI（Upload file）で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。（Vercelにデ...
2023/11/21
2023/11/22
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12