Как настроить авторизацию VK с использованием NextJS Auth?

Как настроить стандартную авторизацию в NextAuth.js с использованием провайдера VK?
  • 31 октября 2023 г. 13:28
Ответы на вопрос 1
Для настройки авторизации VK с использованием NextAuth.js можно выполнить следующие шаги:

1. Установите необходимые пакеты:
```bash
npm install next-auth@beta vk-app-auth
```

2. Создайте файл `[...nextauth].js` в папке `pages/api/auth` и добавьте следующий код:
```javascript
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
  providers: [
    Providers.VK({
      clientId: process.env.VK_CLIENT_ID,
      clientSecret: process.env.VK_CLIENT_SECRET,
    }),
  ],
})
```

3. Получите `clientId` и `clientSecret` для вашего приложения VK. Для этого зарегистрируйтесь как разработчик на сайте VK, создайте новое standalone приложение и получите эти параметры в настройках приложения.

4. Создайте `.env.local` файл в корне проекта и укажите в нем полученные `clientId` и `clientSecret`:
```plaintext
VK_CLIENT_ID=<clientId>
VK_CLIENT_SECRET=<clientSecret>
```

5. Добавьте ссылку на авторизацию VK в вашем компоненте, например, в `pages/index.js`:
```javascript
import { signIn, signOut, useSession } from 'next-auth/client'

export default function Home() {
  const [session, loading] = useSession()

  return (
    <div>
      {!session && (
        <button onClick={() => signIn('vk')}>Войти через VK</button>
      )}
      {session && (
        <div>
          <img src={session.user.image} alt={session.user.name} />
          <h2>{session.user.name}</h2>
          <button onClick={signOut}>Выйти</button>
        </div>
      )}
    </div>
  )
}
```

Теперь, когда пользователь кликает на кнопку "Войти через VK", он будет перенаправлен на страницу авторизации VK, а после успешной авторизации будет возвращен обратно на ваш сайт.

Обратите внимание, что для полноценной работы данного примера также должны быть настроены сессии и база данных. Подробную информацию можно найти в документации NextAuth.js.
Похожие вопросы