basic log in mechanism

This commit is contained in:
talksik
2022-05-28 10:21:17 -05:00
parent d843e0f130
commit 2cc56e42cc
+18 -28
View File
@@ -1,6 +1,6 @@
import { Credentials } from 'google-auth-library/build/src/auth/credentials'; import { Credentials } from 'google-auth-library/build/src/auth/credentials';
import { Button, Container } from '@mui/material'; import { Button, Container } from '@mui/material';
import React, { useContext, useEffect, useCallback } from 'react'; import React, { useContext, useEffect, useCallback, useState } from 'react';
import { FcGoogle } from 'react-icons/fc'; import { FcGoogle } from 'react-icons/fc';
import { blueGrey } from '@mui/material/colors'; import { blueGrey } from '@mui/material/colors';
@@ -11,6 +11,7 @@ import {
signInWithCredential, signInWithCredential,
setPersistence, setPersistence,
browserLocalPersistence, browserLocalPersistence,
User as FirebaseUser,
} from 'firebase/auth'; } from 'firebase/auth';
import { useSnackbar } from 'notistack'; import { useSnackbar } from 'notistack';
@@ -19,7 +20,7 @@ const provider = new GoogleAuthProvider();
provider.addScope('https://www.googleapis.com/auth/contacts.readonly'); provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
interface IAuthContext { interface IAuthContext {
user?: any; user?: FirebaseUser;
} }
const AuthContext = React.createContext<IAuthContext>({}); const AuthContext = React.createContext<IAuthContext>({});
@@ -38,30 +39,17 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
setPersistence(firebaseAuth, browserLocalPersistence) setPersistence(firebaseAuth, browserLocalPersistence)
.then(() => { .then(() => {
// Sign in with credential from the Google user. // Sign in with credential from the Google user.
return signInWithCredential(firebaseAuth, credential) return signInWithCredential(firebaseAuth, credential).then((result) => {
.then((result) => { // This gives you a Google Access Token. You can use it to access Google APIs.
// This gives you a Google Access Token. You can use it to access Google APIs. const credential = GoogleAuthProvider.credentialFromResult(result);
const credential = GoogleAuthProvider.credentialFromResult(result); const token = credential.accessToken;
const token = credential.accessToken;
// The signed-in user info. // The signed-in user info.
const user = result.user; const user = result.user;
console.log(user); console.log(user);
enqueueSnackbar('Signed in! All set!', { variant: 'success' }); enqueueSnackbar('Signed in! All set!', { variant: 'success' });
}) });
.catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.email;
// The credential that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
// ...
enqueueSnackbar('Something went wrong', { variant: 'error' });
});
}) })
.catch((error: any) => { .catch((error: any) => {
// Handle Errors here. // Handle Errors here.
@@ -79,11 +67,13 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
); );
return () => tokenListener(); return () => tokenListener();
}, []); }, [enqueueSnackbar]);
return <Login />; return (
<AuthContext.Provider value={{ user: firebaseAuth.currentUser }}>
return <AuthContext.Provider value={{}}>{children}</AuthContext.Provider>; {firebaseAuth.currentUser ? <>{children}</> : <Login />}
</AuthContext.Provider>
);
}; };
const Login = () => { const Login = () => {