Next-Auth — это полная аутентификация с открытым исходным кодом для Next.Js Приложения. Вы можете узнать больше об этом здесь.

Здесь, в этом уроке блога, я покажу вам, как вы можете использовать NextAuth.js в вашем проекте NextJs, чтобы добавить аутентификацию Google. В этом конкретном уроке я использую Typescript но вы можете следовать за ним для Javascript.


Монтаж

Вы можете установить его с помощью пряжи или с помощью npm.

yarn add next-auth
Войти в полноэкранный режим

Выйти из полноэкранного режима

npm install next-auth
Войти в полноэкранный режим

Выйти из полноэкранного режима


Добавление API-маршрутов

Чтобы добавить NextAuth.js в свой проект, вам нужно сначала создать [...nextauth].ts внутри вас pages/api/auth.

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

import NextAuth, { NextAuthOptions } from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

export const authOptions: NextAuthOptions = {
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID, // 'Your Google Client ID'
            clientSecret: process.env.GOOGLE_CLIENT_SECRET, //  'Your Google Client SECRET'
        }),
        // you can add more providers here
    ],
}

export default NextAuth(authOptions)
Войти в полноэкранный режим

Выйти из полноэкранного режима


Возьмите свои ключи из Google Cloud

кликните сюда и настройте свое приложение

Шаг 1: Создайте проект с любым именем.
Шаг 2. Перейдите на вкладку «Учетные данные». Вкладка «Учетные данные» в облаке Google API
Шаг 3. Создайте учетные данные Создание учетных данных
Шаг 4. Выберите параметр идентификатора клиента OAuth. Параметр идентификатора клиента OAuth
Шаг 5: Заполните некоторые данные, чтобы получить идентификатор и секрет клиента Google. Детали заполнения

Шаг 6: После того, как вы нажмете кнопку «Создать», вы получите идентификатор клиента Google и секрет клиента Google. Сохраните эти учетные данные на своем компьютере. Идентификатор и секрет клиента Google


Настройка переменных окружения

Создать .env.local файл внутри вашего корневого каталога.

GOOGLE_CLIENT_ID="Paste your google client ID here"
GOOGLE_CLIENT_SECRET="Paste you google client secret here"
Войти в полноэкранный режим

Выйти из полноэкранного режима


Настройка OAuth внутри нашего приложения

Чтобы иметь возможность использовать useSession внутри вашего приложения вам сначала нужно обернуть компонент верхнего уровня внутри <SessionProvider></SessionProvider> который исходит от next-auth/react

// _app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { SessionProvider } from 'next-auth/react'

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
    return (
        <SessionProvider session={session}>
            <Component {...pageProps} />
        </SessionProvider>
    )
}

export default MyApp
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь мы можем идти.


Использование аутентификации Google в нашем приложении

Чтобы использовать аутентификацию, нам нужно импортировать некоторые функции из next-auth/react

import { useSession, signIn, signOut } from 'next-auth/react'
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь внутри наших компонентов мы можем использовать useSession, signin а также signout функции


export const MyComponent = () => {
  const { data: session } = useSession()

    //... Your code

    return (
        <>
            {/* Your Code */}

            {session ? (
                    <>
                        <h2>
                            Signed in as {session.user.email}
                        </h2>
                        <button onClick={() => signOut()}>
                            Sign out
                        </button>
                    </>
                ) : (
                    <button onClick={() => signIn()}>
                        Login With Google
                    </button>
                )}


            {/* Your Code */}
        </>
    )
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Поздравляю 🎉🎉🎉

Вы успешно добавили NextAuth.js в свой проект для аутентификации Google.


Полный исходный код

вы можете увидеть полный код на GitHub — Ссылка на сайт


Спасибо, что прочитали мою статью.

По любому вопросу вы можете напрямую связаться со мной по Твиттер или же LinkedIn