nuxt-authのlocal環境と本番環境の違い

はじめに

本記事はnuxt-authを使ったlocal環境と本番環境の違いにろいろ躓いたので備忘録としてまとめた記事です。

システム構成

システム構成は以下のようになっており、
なるべくお金をかけずにポートフォリオページを作ることを目標としてました。

• バックエンド：Nuxt
• フロント：Vue, Vuetify
• ホスティング+DB：vercel
• CMS：Contentful

nuxt-authを用いたlocal環境と本番環境の違い

localと本番環境でnuxt.config.tsとserver/api/authに[...].tsの記述に違いがあります。
ソースコードは以前書いたこちらの記事を参考にします。
（2023/09/09時点での話です）

local環境

local環境であれば以下のようなコードで動きます。

nuxt.config.ts

auth: {
    enableGlobalAppMiddleware: false, // trueの場合は最初にログインページを表示
},

server/api/authに[...].ts

export default NuxtAuthHandler({
	pages: {
		// 中身
	},
    providers: [
        // 中身
    ],
})

本番環境

local環境の書き方のままvercelにデプロイすると怒られます！公式
下で紹介するエラーは、開発中に警告メッセージとして表示され運用中にはアプリケーションを停止するエラーとしてスローされるよう物のようです。

Error: AUTH_NO_ORIGIN: No 'origin' -

originというものが npm run build もしくは npm run generate 時に存在しないとダメみたいです。
デプロイしているアプリにアクセスするためのurlを記述すれば大丈夫です。

nuxt.config.ts

auth: {
    enableGlobalAppMiddleware: false, // trueの場合は最初にログインページを表示
    // デプロイしているアプリにアクセスするためのurlを記述
    origin: 'https://プロジェクト名とかになるはず.vercel.app' 
},

[nuxt] [request error] [unhandled] [500] AUTH_NO_SECRET: No 'secret'

secretはアプリユーザーの cookies / tokens をエンコードするために使われるものです。
local環境では省略でき偽の値に置き換えられるので知りませんでした。
本番環境の際はユーザー独自で作成しvercelの環境変数に入れておけば大丈夫です

server/api/authに[...].tsに1行追加、vercelの環境変数にも対応するトークンを追加するとエラーは消えます。

server/api/authに[...].ts

export default NuxtAuthHandler({
    secret: process.env.AUTH_SECRET, // secretを追加
	pages: {
		// 中身
	},
    providers: [
        // 中身
    ],
})

追記

2024/08/05：
vercelの話をしてますがAWSとかでも同じです！
EC2でNuxtアプリを立てた時に同じエラーがでました。

参考文献

1. Nuxt3：Nuxt-Authで認証機能作ってみた
2. sidebase：Errors and Warnings