Для настройки авторизации 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.