Setup authentication on frontend

[NBNARADHYA]

Signed-off-by: Nikhil B N nikhilbn365@gmail.com

Description

Google authentication has been integrated on the frontend thereby finishing the whole auth process.

https://user-images.githubusercontent.com/45630095/137936032-d08cc7b7-1596-4e60-bbdc-040634b0e957.mp4

How to get authenticated user details on frontend ?

1. Use context api to import user from context : const { user } = useContext(AccessTokenContext);.
2. The user object has properties like name, email, picture, and locale.

How to send requests to backend's protected routes ?

const { user, accessToken } = useContext(AccessTokenContext);

// Redirect to login page if user is not logged in
if (!accessToken || !user) {
   history.push("/login");
}

fetch(url, {
   method: "POST",
   credentials: "include",
   headers: {
      "Authorization": `Bearer ${accessToken}`
   }
})
.then()...

[netlify[bot]]

✔️ Deploy Preview for mlh-prep-4-1-2 ready!

🔨 Explore the source changes: 46ddcccd11652a88aa82bce7553aecc8b804a31a

🔍 Inspect the deploy log: https://app.netlify.com/sites/mlh-prep-4-1-2/deploys/616edb9f349a8d0008ab647a

😎 Browse the preview: https://deploy-preview-29--mlh-prep-4-1-2.netlify.app/