Next.js Firebase v9: Buat AuthProvider dengan Next.js Nookies

Bagian 15: Menangani otentikasi pengguna dengan Firestore di aplikasi React/Next.js

Tonton "serial video" dan "kode sumber"

Di bawah folder root, buat Auth.js.

Lalu masuk ke dalam Auth.js. Pertama, kita perlu mengimpor useEffect, createContext, getAuth dan nookies.

import { useEffect,createContext } from "react";
import { getAuth } from 'firebase/auth';
import nookies from 'nookies';

Lalu kita buat AuthContext. Di dalam useEffect, kita akan memeriksa apakah pengguna tersebut ada. Jika tidak, kami akan console.log('no user') dan menghapus cookie.

Jika ada pengguna, kami akan mendapatkan tokennya dan kemudian menyimpan token tersebut di cookie.

const AuthContext = createContext({});
export const AuthProvider = ({children})=>{
useEffect(() => {
const auth = getAuth()
return auth.onIdTokenChanged(async(user)=>{
if (!user) {
console.log('no user');
return;
}
const token = await user.getIdToken();
console.log('token', token);
console.log('user', user);
})
}, [])
return (
<AuthContext.Provider value={{}}>
{children}
</AuthContext.Provider>
)
}
export const useAuth = () =>useContext(AuthContext)

Nanti kita akan meneruskan nilai pengguna ke Provider, sehingga kita bisa mendapatkannya dengan menggunakan useAuth.

export const useAuth = () =>useContext(AuthContext)

Uji Penyedia Auth

Buka _app.js, impor AuthProvider, lalu bungkus komponen dengan <AuthProvider>.

import { AuthProvider } from '../Auth'
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return (
<AuthProvider>
<Component {...pageProps} />
</AuthProvider>
)
}
export default MyApp

Sekarang, jika kita memuat ulang halaman tersebut, kita dapat melihat "tidak ada pengguna" muncul di konsol.

Konten lainnya di plainenglish.io