!危險網站!解決Firebase上部屬Next.js網站使用NextAuth.js整合LINE登入遭遇的問題

-

相信許多人使用Firebase部屬網站，都會遇到這個危險網站的問題。本機電腦開發時都沒有問題，但是部屬後網站，只要點擊登入頁就會被Chrome標記成危險網站，使用者要登入都沒辦法。這到底該怎麼解決呢?


在台灣很常使用Facebook和LINE作為訊息傳遞媒介，會希望可以快速開發一個具備會員系統的電商網站，會希望這些會員可以快速成為自己的網站會員，就會提供FB和LINE登入。

然而Firebase auth本身並沒有直接支援LINE登入的，這也使得我會考慮使用NextAuth.js這套非常完整的登入解決方案，只要透過一些設定就可以快速支援多達27種快速登入方式。


因此就會想在Next.js中使用NextAuth.js套件以減少開發時間。待我設定並部屬到Firebase後才發現，這個方案是個大雷包，部屬後就被google設為危險網站。

針對這個危險網站的問題，在不更換NextAuth.js套件的情況下，我自己有測試可行的解法有2種，而第3種解法是網友提供的，接著就將這些解法介紹給大家。

1. 設定自訂網域

<這個方案適用於已經用有網域的人>

以我在自己的網域 mirochiu.page 中，進入Firebase主控台hosting功能，在網域部份[新增自訂網域]，如下圖是 member-system.mirochiu.page 


經過Firebase指示將CNAME設定成firebase可接受，然後等待約5~15分鐘，讓憑證生成一下，就可以正常使用你的網域進行登入，不會再顯示危險網站。

記得的部屬環境變數要設定NEXTAUTH_URL設成 https://你的自訂網域/api/auth/

上述是NextAuth.js是v4得設定；如果使用v5是設定AUTH_URL環境變數

2. 改NextAuth.js登入的路徑

<這個方案適用於沒有自己網域的人>

一開始是很想咎責NextAuth.js套件，github上也有數篇討論是針對這個問題詢問的，身為工程師，就來追根究底一下。

查看網站存取log，網站端並沒有收到request，所以實際上危險網站是觸發在比較前面的部份，連要咎責NextAuth.js都沒辦法，因為它都還沒開始處理呢!

從這裡推論，導致chrome顯示危險網站的可能是chrome瀏覽器本身的白名單。

先了解NextAuth.js本身機制，套件預設的登入路徑是/api/auth/xxxx，要規避這個瀏覽器白名單機制，就需要改這個登入的路徑。我這裡就要改成/miro-auth/xxxx。


以NextAuth v4使用Next.js App router的實作來解釋，程式碼都放在/src下時

2.1 移動route.ts的位置

原本是 /src/app/api/auth/[...nextauth] 目錄

移動到 /src/app/miro-auth/[...nextauth] 目錄下

2.2 設定NEXTAUTH_URL環境變數

開發用的NEXTAUTH_URL設成 http://localhost:3000/miro-auth

部屬用的NEXTAUTH_URL設成 https://你的firebase專案.web.app/miro-auth

上述是NextAuth.js是v4得設定；如果你是使用v5是設定AUTH_URL環境變數

2.3 修改SessionProvider

如果你的專案使用到next-auth/react的 useSeesion, signIn, signOut

請在SessionProvider加入basePath="/miro-auth"

完整的範例如下 NextAuthProvider.tsx

'use client';

import { SessionProvider } from 'next-auth/react';
import type { Session } from 'next-auth';

export interface AuthProviderProps {
children: React.ReactNode;
session?: Session | null;
};

const NextAuthProvider = ({ children, session }: Readonly<AuthProviderProps>) => {
return <SessionProvider session={session} basePath="/miro-auth">{children}</SessionProvider>;
};

export default NextAuthProvider;

2.4 變更你得LINE登入callback 

進入你得LINE developer console變更Callback URL

開發用改成 http://localhost:3000/miro-auth/callback/line

原本是 http://localhost:3000/api/auth/callback/line

 

部屬用改成 https://你的firebase專案.web.app/miro-auth/callback/line

原本是 https://你的firebase專案.web.app/api/auth/callback/line

2.5 重新部屬網站

因為危險網站是只有部屬後才發生的狀況，所以本機只能查看LINE登入機制是否還正常運作。實際狀況就是需要重新部屬你的網站。

3. (網友提供) 將網站登記到google search console

<這個方案是不需要改程式的簡單方案>

只是需要等待google回覆，以便解除危險網站的設定。


以上三種方案可以解決Next.js+NextAuth.js+Firebase登入功能被視為危險網站的問題


留言

張貼留言