P粉0378809052023-08-27 12:25:17
To check if the user is logged in, you can use the 'onAuthStateChanged' method.
Store this information in the component's state, or use it to conditionally render parts of the component.
import React, { useEffect, useState } from 'react'; import firebase from 'firebase/app'; import 'firebase/auth'; export default function Home() { const [user, setUser] = useState(null); useEffect(() => { const unsubscribe = firebase.auth().onAuthStateChanged(user => { setUser(user); }); return () => unsubscribe(); }, []); return ( <main> <h1>Hello World</h1> {user ? ( <p>authenticated user</p> ) : null} </main> ); }
To perform user authentication on the server side, Next.js provides 'getServerSideProps' to get the user's authentication status
import firebase from 'firebase/app'; import 'firebase/auth'; export default function Home({ user }) { return ( <main> <h1>Hello World</h1> {user ? ( <p>authenticated user</p> ) : null} </main> ); } export async function getServerSideProps(context) { const user = await new Promise((resolve, reject) => { firebase.auth().onAuthStateChanged(user => { resolve(user); }); }); return { props: { user, }, }; }
Updated solution:
Create a server-side route
import firebase from 'firebase/app'; import 'firebase/auth'; import express from 'express'; const app = express(); app.get('/api/user', async (req, res) => { const user = await new Promise((resolve, reject) => { firebase.auth().onAuthStateChanged(user => { resolve(user); }); }); res.send(user); }); app.listen(3000, () => { console.log('Server started at http://localhost:3000'); });
Client code
import React, { useState, useEffect } from 'react'; import axios from 'axios'; export default function Home() { const [user, setUser] = useState(null); useEffect(() => { const fetchUser = async () => { const res = await axios.get('http://localhost:3000/api/user'); const user = res.data; setUser(user); }; fetchUser(); }, []); return ( <main> <h1>Hello World</h1> {user ? ( <p>authenticated user</p> ) : null} </main> ); }