次の認証を設定する3つの簡単な手順.js

ハローワールド👋

このチュートリアルでは、次の認証を簡単に設定する方法を確認します.jsアプリ.

ステップ1。次作成.アプリケーション

yarn create next-app next-auth
# npx create-next-app next-auth

これは新しい次を作成します.JSアプリケーション.不要なファイルを削除し、以下のように構成できます.

マイpages/index.js 以下を含みます

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  )
}

ステップ2 : nextauthとsqliteパッケージをインストールする

このチュートリアルではSQLiteをデータベースとして使用しますnext-auth サポートすべての人気のデータベースです.

yarn add next-auth sqlite3
# npm install next-auth sqlite3

ステップ3：セットアップネクサスAPIルート

ファイル名を作成する[...nextauth].js 下/pages/api/auth また、次のコンテンツを追加します.

// pages/api/auth/[...nextauth].js

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

const options = {
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET
    }),
  ],
  database: process.env.DATABASE_URL,
}

export default (req, res) => NextAuth(req, res, options)

さて、/api/auth/* はnext-auth .
この例では、Github認証プロバイダーのみが追加されます.でもnext-auth 既定ですべての次のプロバイダをサポートします.

Apple            Email            Okta
Auth0            Facebook         Reddit
Basecamp         GitHub           Slack
BattleNet        GitLab           Spotify
Box              Google           Twitch
Cognito          IdentityServer4  Twitter
Credentials      LinkedIn         Yandex
Discord          Mixer

あなたも、あなた自身のプロバイダを追加することができます.詳細here .
クリエイト.env.local プロジェクトのルートでファイルし、[...nextauth].js ファイル.

# .env.local
GITHUB_ID=a8451b4a*********
GITHUB_SECRET=95be17c33**********
DATABASE_URL=sqlite://localhost/:memory:?synchronize=true

値を置換するGITHUB_ID and GITHUB_SECRET あなた自身のキーで.次の手順に従ってくださいhere . OAuthアプリを作成中にhttp://localhost:3000/api/auth/callback ASAuthorization callback URL . フィールドの残りの部分は、何でも埋めることができます.

この後にhttps://github.com/settings/developers そして、新しく作成されたOAuthアプリを開きますGITHUB_ID and GITHUB_SECRET そして、.env.local ファイル.
さて、SignIn and SignOut あなたのボタンindex.js ページ.

// pages/index.js
import { signIn, signOut, useSession } from 'next-auth/client'

export default function Home() {
  const [ session ] = useSession()
  return (
    <div>
      <h1>Hello World</h1>
      {session ? (
        <button onClick={() => signOut()}>Signout</button>
      ) : (
        <button onClick={() => signIn()}>SignIn</button> 
        )}
      {session && (
        <div>
          <small>Signed in as</small>
          <br/>
          <strong>{session.user.email || session.user.name}</strong>
        </div>
      )}
    </div>
  )
}

それです.あなたのアプリケーションは現在github認証のセットアップがあります.

あなたがより本格的な例を見たいならば、あなたはダウンロードすることができますofficial next-auth-example 提供するNextAuth.js .
ここで注意するもう一つの重要なことはNextAuth.js データベースの有無にかかわらず使用できます.また、パスワードを以下のログインビルトインに似ているHashnode . あなただけの電子メールサーバーの詳細を提供する必要があり、あなたが設定されています.このパッケージは、認証を風に設定します.認証を行うためだけに、別のバックエンドを持っている必要はありません.

リンクと参照

NextAuth.js

Next.js

次は何ですか。

次の記事は、おそらくMy Review of Kent C. Dodds's EpicReact.Dev シリーズより多くを知っているためにそのシリーズページに行ってください.

今度まで👋

この記事が好きならチェックアウト

Add Typescript to your Next.js project

How to Import SVGs into your Next.js Project?

あなたは@ Twitterで私にコメントすることができますか、または私に従うこと自由に感じなさい.