即使在具有 firebase 身份验证的 nextjs 应用程序中重新加载页面后，如何保持用户登录？

Question

我正在使用 firebase 进行身份验证，用户正在使用 GoogleAuthProvider 登录。 我面临的问题是用户在页面重新加载时注销。 如何让用户在 localStorage 中存储任何凭据。

下面是我尝试过的代码，但是通过将访问令牌存储在 localStorage 中。

//登录.tsx`

 import styles from "../styles/styles.module.css"; import { useRouter } from "next/router"; import Head from "next/head"; import { Button } from "@mui/material"; import { auth } from "../auth/auth"; import Image from "next/image"; import { GoogleAuthProvider, signInWithPopup } from "firebase/auth"; const provider = new GoogleAuthProvider(); const signIn = () => { const router = useRouter(); router.asPath === "/"; const signInWithGoogle = () => { signInWithPopup(auth, provider).then(async (result) => { window.localStorage.setItem( "accessToken", await result.user.getIdToken() ); router.push("/"); }).catch((error: any) => { console.log("signin canceled by the user"); }); }; return ( <> <Head> <title>Travelogue | SignIn</title> <meta name="description" content="Login" /> </Head> <main className={styles.login_box}> <div> <h1 style={{ fontFamily: "sans-serif", fontWeight: "lighter", }} > Sign In To Travelogue </h1> <hr /> </div> <div style={{ padding: "0 0 0 30px" }}> <Button type="submit" onClick={signInWithGoogle} className={styles.google_btn} > <div className={styles.googleSignIn_logo}> <Image alt="googleLogo" src={"/googleLogo.png"} layout="fixed" width={"30"} height={"30"} priority={true} /> </div> <div className={styles.btn_text}> <p> <b>Sign in with google</b> </p> </div> </Button> </div> </main> </> ); }; export default signIn;

`

//auth.tsx`

 import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; import configuration from "../Environment.config"; const firebaseConfig = { apiKey: configuration.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY, authDomain: configuration.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, projectId: configuration.NEXT_PUBLIC_FIREBASE_PROJECT_ID, storageBucket: configuration.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, messagingSenderId: configuration.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, appId: configuration.NEXT_PUBLIC_FIREBASE_APP_ID, }; const app = initializeApp(firebaseConfig); export const auth = getAuth(app);

`

//授权.tsx`

 import { onAuthStateChanged } from "firebase/auth"; import { auth } from "../auth/auth"; //isLoggedIn is used to change the header //isLoggedIn is always returning true (to be fixed) //we need to have something like if ACCESS_TOKEN || accessToken is null return false export const isLoggedIn = () => { if ( //For ref: https://firebase.google.com/docs/auth/web/manage-users onAuthStateChanged(auth, async (user) => { if (user.== null && typeof window;== undefined) { const ACCESS_TOKEN = await user.getIdToken(). const accessToken = window;localStorage;getItem("accessToken"); if ( accessToken;== null && ACCESS_TOKEN;== null && accessToken === ACCESS_TOKEN ) return true; } else return false; }) ) return true; };

`

Answer 1

这可以通过设置服务工作者来实现，如下所述： https://firebase.google.com/docs/auth/web/service-worker-sessions

我通过实施 Nuxt Firebase 插件在 Nuxt 应用程序中实现了这一点。 对于 Next，您可以通过查看他们的 repo 获得一些灵感： https://github.com/nuxt-community/firebase-module/tree/master/packages/firebase-module/lib/utils

干杯

即使在具有 firebase 身份验证的 nextjs 应用程序中重新加载页面后，如何保持用户登录？

问题描述

1 个解决方案

解决方案1
0 2022-02-28 13:50:46

即使在具有 firebase 身份验证的 nextjs 应用程序中重新加载页面后，如何保持用户登录？

问题描述

1 个解决方案

解决方案1 0 2022-02-28 13:50:46

解决方案1
0 2022-02-28 13:50:46