feat: Create useAuth hook.

Author: zouhir96

src/components/Layout/SettingsLayout/SettingsLayout.tsx

@@ -1,32 +1,23 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import 'react-contexify/dist/ReactContexify.css'
 import { NavLink, Outlet } from 'react-router-dom'
-import toast from 'react-simple-toasts'
-import { auth } from 'src/features/auth'
-import { CurrentUser } from 'src/types'
+import { User } from 'src/features/auth/types'
+import { useAuth } from 'src/stores/user'
 import './settings.css'
 
 interface UserInfoProps {
-  userInfo: CurrentUser
+  user: User
 }
 
-const UserInfo = ({ userInfo }: UserInfoProps) => {
-  const logout = () => {
-    auth
-      .signOut()
-      .then((result) => {
-        toast('Account logged out successfuly', { theme: 'defaultToast' })
-      })
-      .catch((error) => {
-        toast('Failed to logged out, please try later !!', { theme: 'failure' })
-      })
-  }
+const UserInfo = ({ user }: UserInfoProps) => {
+  const { logout } = useAuth()
+
   return (
     <div className="userCard">
-      {userInfo?.imageURL && <img src={userInfo.imageURL} className="userImage"></img>}
+      {user?.imageURL && <img src={user.imageURL} className="userImage"></img>}
       <div className="userInfos">
-        <div className="userName">{userInfo?.name}</div>
-        <div className="userEmail">{userInfo?.email}</div>
+        <div className="userName">{user.name}</div>
+        <div className="userEmail">{user?.email}</div>
       </div>
       <button className="logoutBtn" onClick={logout}>
         Logout
@@ -36,22 +27,7 @@ const UserInfo = ({ userInfo }: UserInfoProps) => {
 }
 
 export const SettingsLayout = () => {
-  const [user, setUser] = useState<CurrentUser | null>(null)
-  useEffect(() => {
-    const unsubscribe = auth.onAuthStateChanged((user) => {
-      if (user) {
-        const currentUser = {
-          name: user?.displayName || '',
-          email: user?.email || '',
-          imageUrl: user?.photoURL || '',
-        }
-        setUser(currentUser)
-      } else {
-        setUser(null)
-      }
-    })
-    return () => unsubscribe()
-  })
+  const { user } = useAuth()
   const navigation = [
     {
       name: 'Topics',
@@ -76,7 +52,7 @@ export const SettingsLayout = () => {
   ]
   return (
     <div className="settings">
-      {user != null && <UserInfo userInfo={user} />}
+      {user != null && <UserInfo user={user} />}
       <div className="horizontalTabsLayout">
         <nav className="navigation">
           {navigation.map((item) => {

src/features/auth/components/AuthModal.tsx

@@ -1,7 +1,8 @@
-import { GithubAuthProvider, GoogleAuthProvider, signInWithPopup } from 'firebase/auth'
+import { AuthProvider, OAuthProvider, signInWithPopup } from 'firebase/auth'
 import { FaGithub, FaGoogle } from 'react-icons/fa'
 import ReactModal from 'react-modal'
 import toast from 'react-simple-toasts'
+import { useAuth } from 'src/stores/user'
 import { auth, githubProvider, googleProvider } from '../api/Config'
 
 type AuthModalProps = {
@@ -10,33 +11,30 @@ type AuthModalProps = {
 }
 
 export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
-  const signInWithGoogle = () => {
-    signInWithPopup(auth, googleProvider)
-      .then((result) => {
-        const credential = GoogleAuthProvider.credentialFromResult(result)
-        // TODO save this token in user settings maybe!
-        const token = credential.accessToken
-        // The signed-in user info.
-        const user = result.user
-        console.log(user)
-      })
-      .catch((error) => {
-        toast("We couldn't login to you Google account!!", { theme: 'failure' })
-      })
-  }
+  const { initState } = useAuth()
 
-  const signInWithGithub = () => {
-    signInWithPopup(auth, githubProvider)
+  const signIn = (provider: AuthProvider, providerName: string) => {
+    signInWithPopup(auth, provider)
       .then((result) => {
-        const credential = GithubAuthProvider.credentialFromResult(result)
-        // TODO save this token in user settings maybe!
-        const token = credential.accessToken
-        // The signed-in user info.
-        const user = result.user
-        console.log(user)
+        const credential = OAuthProvider.credentialFromResult(result)
+        const accessToken = credential?.accessToken
+        const email = result.user.displayName
+        const name = result.user.displayName
+        const imageURL = result.user.photoURL
+        if (accessToken && name && email && imageURL) {
+          initState({
+            accessToken: accessToken,
+            user: {
+              name: name,
+              email: email,
+              imageURL: imageURL,
+            },
+          })
+        }
       })
       .catch((error) => {
-        toast("We couldn't login to you Github account!!", { theme: 'failure' })
+        console.log(error)
+        toast(`We couldn't login to your ${providerName} account!!`, { theme: 'failure' })
       })
   }
 
@@ -66,14 +64,14 @@ export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
           </p>
         </div>
         <div>
-          <button className="extraTextWithIconBtn" onClick={signInWithGithub}>
+          <button className="extraTextWithIconBtn" onClick={() => signIn(githubProvider, 'Github')}>
             <FaGithub />
             Sign in with Github
           </button>
           <button
             className="extraTextWithIconBtn"
             style={{ marginLeft: 10 }}
-            onClick={signInWithGoogle}>
+            onClick={() => signIn(googleProvider, 'Google')}>
             <FaGoogle />
             Sign in with Google
           </button>

src/features/auth/index.ts

@@ -1,2 +1,3 @@
 export * from './api/Config'
 export * from './components/AuthModal'
+export * from './types'

src/features/auth/types/index.ts

@@ -0,0 +1,5 @@
+export type User = {
+  name: string
+  email: string
+  imageURL?: string
+}

src/stores/user.ts

@@ -0,0 +1,33 @@
+import { User } from 'src/features/auth/types'
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+type AuthState = {
+  accessToken: string | null
+  user: User | null
+}
+
+type AuthActions = {
+  initState: (state: AuthState) => void
+  isLogged: () => boolean
+  logout: () => void
+}
+
+export const useAuth = create(
+  persist<AuthState & AuthActions>(
+    (set, get) => ({
+      accessToken: null,
+      user: null,
+      initState: (newState: AuthState) =>
+        set({
+          accessToken: newState.accessToken,
+          user: newState.user,
+        }),
+      isLogged: () => !!get().user,
+      logout: () => set({ user: null }),
+    }),
+    {
+      name: 'auth-storage', // key in localStorage
+    }
+  )
+)

src/types/index.ts

@@ -123,9 +123,3 @@ export type DNDDuration =
     }
   | 'always'
   | 'never'
-
-export type CurrentUser = {
-  name: string
-  email: string
-  imageURL?: string
-}