Breaking News: Grepper is joining You.com. Read the official announcement!

firebase auth context in react

Uninterested Unicorn answered on December 8, 2023 Popularity 4/10 Helpfulness 1/10

answer firebase auth context in react

firebase auth context in react

Comment

// AuthContext.tsx
import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
import { auth } from './firebase';

interface AuthContextProps {
  currentUser: firebase.User | null;
  signup: (email: string, password: string) => Promise<firebase.auth.UserCredential>;
  login: (email: string, password: string) => Promise<firebase.auth.UserCredential>;
  logout: () => Promise<void>;
}

const AuthContext = createContext<AuthContextProps | undefined>(undefined);

interface AuthProviderProps {
  children: ReactNode;
}

export function useAuth(): AuthContextProps {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

export function AuthProvider({ children }: AuthProviderProps): JSX.Element {
  const [currentUser, setCurrentUser] = useState<firebase.User | null>(null);
  const [loading, setLoading] = useState(true);

  const handleAuthStateChanged = (user: firebase.User | null): void => {
    setCurrentUser(user);
    setLoading(false);
  };

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(handleAuthStateChanged);

    return () => {
      // Unsubscribe only when the component unmounts
      unsubscribe();
    };
  }, []); // Empty dependency array means this effect runs once on mount

  const value: AuthContextProps = {
    currentUser,
    signup: async (email, password) => auth.createUserWithEmailAndPassword(email, password),
    login: async (email, password) => auth.signInWithEmailAndPassword(email, password),
    logout: async () => auth.signOut(),
  };

  return <AuthContext.Provider value={value}>{!loading && children}</AuthContext.Provider>;
}

Popularity 4/10 Helpfulness 1/10 Language typescript

Source: chat.openai.com

Tags: firebase typescript

Link to this answer
Share Copy Link

Contributed on Dec 08 2023

Uninterested Unicorn

0 Answers Avg Quality 2/10

firebase auth context in react

Contents

More Related Answers

firebase auth context in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.