Zenn
🔐

Nuxt3でのメールアドレス、パスワードによる認証の実装

2023/04/19に公開
Nuxt
auth
Nuxt 3
tech

nuxt-authのリリース

最近やっとnuxt-authとしてリリースされました
中身的にはNextAuthです

メールアドレス、パスワードによるカスタムログイン認証の実装

QuickStart通りに準備していきます

nuxt-authのインストール

pnpm i -D @sidebase/nuxt-auth

nuxt.config.tsへ追加

export default defineNuxtConfig({
   modules: ['@sidebase/nuxt-auth'],
})

サーバサイド認証の実装

server/api/auth/[...].ts
これは、/api/auth/ 以下のアクセスをキャッチオールする設定で、今回は利用しませんが、NextAuthが準備しているログイン画面等もこのURLに含まれるています

import { NuxtAuthHandler } from '#auth'
import CredentialsProvider from 'next-auth/providers/credentials'

export default NuxtAuthHandler({
  pages: {
    signIn: '/',
  },
  providers: [
    // @ts-ignore .default
    CredentialsProvider.default({
      authorize(credentials: { email: string, password: string }) {
        return {
          id: 1,
          name: 'name',
          username: 'username',
          email: credentials.email,
          image: 'https://avatars.githubusercontent.com/u/23360933?s=64&v=4',
        }
      }
    })
  ],
  callbacks: {
    async session({ session, token, user }) {
      console.log(session, token, user)

      session.user.id = +token?.sub
      session.user.username = 'username2'

      return session
    },
  },
})

認証部分は作成しておらず、単純にオブジェクトを返すような設定になっています
authorizeでuserを返しますが、実際に取得できる値としては、name、email、imageだけとなります
これは DefaultSessionとして定義されているためで、ドキュメントにあるように定義する必要があります

types/next-auth.d.ts

import type { DefaultSession } from 'next-auth'

declare module 'next-auth' {
  interface Session {
    user: {
      id: number
      username: string
    } & DefaultSession['user']
  }
}

callbacksのsessionで値をセットすることで値を利用できるようになります

アプリケーション側の実装

app.vue

<script setup lang="ts">
const { status, data, signOut, signIn } = useAuth()
const email = ref('')
const password = ref('')
const handleSubmit = async () => {
  await signIn('credentials', { email: email.value, password: password.value })
}
</script>

<template>
  <div>
    <pre>{{ status }}</pre>
    <pre>{{ data }}</pre>
    <form @submit.prevent="handleSubmit">
      <input v-model="email" type="email" />
      <input v-model="password" type="password" />
      <button type="submit">Login</button>
    </form>
    <button @click="signOut()">Logout</button>
  </div>
</template>

カスタムログインの場合は、signInメソッドの引数に credentials を指定した上で、認証に利用する値を渡すことになります

サンプル

nuxt-auth-exampleベースに上記の内容を追加サンプルもおいておきます
https://github.com/cockok/nuxt-auth-example

Discussion