📘
nuxt-authをセットアップして、GitHubログインを試す。
Nuxtをセットアップして動作確認
terminal
#node@ltsのセットアップ
volta install node@lts
#nodeバージョン固定
volta pin node@lts
#Nuxtの初期セットアップ
npx nuxi create-app nuxt-auth-tutorial
#ディレクトリの移動
cd nuxt-auth-tutorial
#初動確認
npm run dev -- -o
nuxt-authのセットアップ
terminal
# nuxt-authライブラリインストール
npm i -D @sidebase/nuxt-auth
config.tsにmodulesを追記
nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ['@sidebase/nuxt-auth'] //追記
})
GitHub認証機能の実装
ルートディレクトリに以下のファイルを追加する
server/api/auth/[...].ts
ファイルにコードを記述する
[...].ts
import { NuxtAuthHandler } from '#auth'
import GithubProvider from 'next-auth/providers/github'
export default NuxtAuthHandler({
providers: [
// @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
GithubProvider.default({
clientId: 'enter-your-client-id-here',
clientSecret: 'enter-your-client-secret-here'
})
]
})
GitHub Providerのドキュメント確認
Configurationセットアップ
設定内容
.evnの作成
ルートディレクトリに .env ファイルを作成して、下記を記述する
.env
GH_CLIENT_ID='****'
GH_SECRET='****'
.envを読み込む設定を追加
[...].ts
import { NuxtAuthHandler } from '#auth'
import GithubProvider from 'next-auth/providers/github'
export default NuxtAuthHandler({
providers: [
// @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
GithubProvider.default({
clientId: process.env.GH_CLIENT_ID,
clientSecret: process.env.GH_SECRET
})
]
})
認証画面を作成してサインイン／サインアウトを試す
ルートディレクトリに pages/index.vue を作成してコードを記述する
pages/index.vue
<template>
<div>
<button v-if="loggedIn" @click="handleSignOut">SiginOut</button>
<button v-else @click="handleSignIn">SiginIn</button>
</div>
</template>
<script setup lang="ts">
const { status, data, signIn, signOut } = useAuth();
const loggedIn = computed(() => status.value === "authenticated");
async function handleSignIn() {
await signIn("github");
}
async function handleSignOut() {
await signOut();
}
</script>
app.vue から先程の pages/index.vue を読み込むコードを記述する
app.vue
<template>
<div>
<NuxtPage />
</div>
</template>
terminal
npm run dev -- -o
GitHub認証に成功するとボタンが SignOut に変わる
ブラウザのクッキーにセッショントークンが保持されていることを確認できる。
参考情報
以上。
Discussion