Removed React-Auth-kit #3
Conversation
src/components/login/AuthDetails.tsx
Outdated
| }).catch(error => console.log(error)) | ||
| } | ||
|
|
||
| return <div>{authUser ? <><p>{`Signed In as ${authUser}`}</p><button onClick={userSignOut}> Sign Out</button> </> : <p>Signed Out</p>}</div> |
There was a problem hiding this comment.
Use an authUser property such as email.
Something like this:
{`Signed In as ${authUser.email}`}
There was a problem hiding this comment.
I've tried doing it as you suggested, however I got an error. so instead I used this ${auth.currentUser?.email}
src/components/login/AuthDetails.tsx
Outdated
| @@ -0,0 +1,28 @@ | |||
| import { onAuthStateChanged, signOut } from "firebase/auth"; | |||
There was a problem hiding this comment.
Import User from "firebase/auth" so that you can use it with your authUser hook.
Like this:
import { onAuthStateChanged, signOut, User } from 'firebase/auth';
src/components/login/AuthDetails.tsx
Outdated
| import { auth } from '../../firebase-config'; | ||
|
|
||
| const AuthDetails = () => { | ||
| const [authUser, setAuthUser] = useState(null); |
There was a problem hiding this comment.
Make sure to specify the type User or null for your hooks.
Like this:
const [authUser, setAuthUser] = useState<User | null>(null);
There was a problem hiding this comment.
Done. I'm still getting familiar and functionality of hooks and useState
src/components/login/AuthDetails.tsx
Outdated
| useEffect(() => { | ||
| const listen = onAuthStateChanged(auth, (user) => { | ||
| if (user) { | ||
| setAuthUser |
There was a problem hiding this comment.
Looks like you forgot to use this hook and set the user once it comes in.
Update with:
setAuthUser(user);
There was a problem hiding this comment.
done. I did do that at first. But it was throwing an error. I tried different variations to solve why but in the end i just removed it.
src/components/login/AuthDetails.tsx
Outdated
| const [authUser, setAuthUser] = useState(null); | ||
|
|
||
| useEffect(() => { | ||
| const listen = onAuthStateChanged(auth, (user) => { |
There was a problem hiding this comment.
Recommend renaming 'listen' to 'removeAuthListener' since that more clearly communicates that this funciton will remove the listener that was setup when a subscription was created that runs a callback whenver the authentication state changes.
For example:
const removeAuthListener = onAuthStateChanged(auth, (user) => {
There was a problem hiding this comment.
done. Is this more so just have better naming conventions as to make it more clean code for it to be understood by the next person?
src/components/login/AuthDetails.tsx
Outdated
| setAuthUser(null); | ||
| } | ||
| }) | ||
| return () => listen(); |
There was a problem hiding this comment.
Also, if listen is changed to removeAuthListener, make sure to update this line too. Like this:
return () => removeAuthListener();
Removed React-Auth-kit because direction was changed to use Google Firebase instead