[x] Check your email, you have been granted admin access to a Google Cloud Project called "Signature Generator"
[x] Follow this tutorial to implement the sign in with Google
While the tutorial is quite comprehensive, we will need to change some things to make it work with our project
[x] Instead of adding the button to an empty App.js, we will be adding it to our Header.tsx component
[x] Button should be to the right of the Theme-switcher, but both buttons should remain pushed to the right of the page (some styling will need to happen here
[x] Whenever you get to the part where the tutorial uses useGoogleLogin and axios, that logic should be placed within our AuthenticationProvider (this will make the profile and user info available to the whole app instead of just one component)
[x] Header component should be able to then use const { profile } = useAuthenticationContext() to get the profile info and update what the button shows (login / logout)
ℹ️ We will not modify App.tsx as much as the tutorial suggests, see next bullet
[x] App.tsx should also use the profile through the hook --> const { profile } = useAuthenticationContext() and add a welcome message iff the user is logged in, if they are not logged in then we return an empty Fragment
<Layout>
{ profile ? <h3>Welcome {profile.name} !</h3> : <> </> }
... everything else stays as it was ...
</Layout>
ACCEPTANCE CRITERIA
The user should be able to sign-in with google
The user should be able to sign out (button should change based on the authentication status)
Welcome message is displayed when the user is signed in
Welcome message disappears when the user signs out
Welcome message does NOT appear until the user is signed in
While the tutorial is quite comprehensive, we will need to change some things to make it work with our project
App.js, we will be adding it to ourHeader.tsxcomponent[x] Whenever you get to the part where the tutorial uses
useGoogleLoginandaxios, that logic should be placed within our AuthenticationProvider (this will make the profile and user info available to the whole app instead of just one component)[x] Header component should be able to then use
const { profile } = useAuthenticationContext()to get the profile info and update what the button shows (login / logout)ℹ️ We will not modify
App.tsxas much as the tutorial suggests, see next bulletprofilethrough the hook -->const { profile } = useAuthenticationContext()and add a welcome message iff the user is logged in, if they are not logged in then we return an empty FragmentACCEPTANCE CRITERIA