Firebase Login (React)

Firebase 초기화

import { initializeApp } from 'firebase/app'
import {
  getAuth,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth'

const firebaseConfig = {
  apiKey: ,
  authDomain: ,
  projectId: ,
  storageBucket: ,
  messagingSenderId: ,
  appId: ,
  measurementId: ,
};

const app = initializeApp(firebaseConfig)
export const auth = getAuth()
const provider = new GoogleAuthProvider()
provider.setCustomParameters({
  prompt: 'select_account',
})
//login
export const googleSignIn = async () => await signInWithPopup(auth, provider)
//logout
export const googleSignOut = async () => await signOut(auth)

로그인 감지(app.js)

function App() {
  const dispatch = useAppDispatch()

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (user) => {
      if (user) {
        // 로그인 토큰 가져오기
        const token = await user.getIdToken()
        // 로그인 Redux 처리 
        dispatch(getUserThunk(token))
      }
    })
    return unsubscribe
  }, [dispatch])

export default App

로그인 처리

export const getUserThunk = createAsyncThunk(
  'authSlice/getUser',
  async (token: string, thunkApi) => {
    try {
      const userData = await AuthService.signIn({ token })
      const displayName = userData.email.split('@')[0]
      return {
        email: userData.email,
        token,
        displayName,
        imgUrl: userData.userImageUrl,
      }
    } catch (error) {
      const message = ErrorService.axiosErrorHandler(error)
      return thunkApi.rejectWithValue(message)
    }
  }
)

import axios from 'axios'

interface SignInParam {
  token: string
}

const signIn = async ({ token }: SignInParam) => {
  const response = await axios.get('/api/users/me', {
    headers: { Authorization: `${token}` },
    withCredentials: true,
  })
  return response.data
}

const signOut = async () => {
  const response = await axios.delete('/api/users/me', {
    withCredentials: true,
  })
  return response
}

const AuthService = { signIn, signOut }

export default AuthService