Assignment Discussion | Project 1 Starting - Google OAuth Integration | Saving User Data in Local Storage

Assignment Discussion | Project 1 Starting - Google OAuth Integration | Saving User Data in Local Storage

Which npm package we used to integrate Google oAuth ?
Which npm package we used to decode the response ?

Where we have saved our user data info ?

Which npm package we used to integrate Google oAuth ?
@react-oauth/google @react-oauth/google
Which npm package we used to decode the response ?
jwt-decode (JSON web token) jwt-decode
Where we have saved our user data info ?
LocalStorage:

` if(userData){
        window.localStorage.setItem("name",userData.name)
        window.localStorage.setItem("email",userData.email)
        window.localStorage.setItem("picture",userData.picture)
        return <User Data={userData}/>
    }
    let name=window.localStorage.getItem("name",userData.name)
    let email=window.localStorage.getItem("email",userData.email)
    let picture=window.localStorage.getItem("picture",userData.picture)
    if(name && email && picture){
        SetuserData({name,email,picture})
}`
2 Likes
Q1: Which npm package we used to integrate Google oAuth?
Ans:  This '@react-oauth/google' npm package we used to integrate Google OAuth.
* Steps to install above package:-
    - Now we can search 'react-oauth/google' in Google search engine.
    - To get OAuth dependencies, https://www.npmjs.com/package/@react-oauth/google
    - We don't need to understand how these packages work
    - We need to know how to utilize them that's it.
    - Copy right side code 'npm i @react-oauth/google'.
    - And paste it in terminal of VS code.
    - To paste we need to get into project's folder
    - '"@react-oauth/google": "^0.11.1",' -> It appears in package.json file as one of dependencies automatically.
    - We need to refer https://www.npmjs.com/package/@react-oauth/google this page documentation for how to use them to get GOAuth.
    - We need to copy GoogleOAuthProvider & GoogleLogin codes and paste it in Auth.js file.

Q2: Which npm package we used to decode the response?
Ans: This 'jwt-decode' used  to decode the response token.
        Here jwt stands for JSON Web Token.
Steps to install above package:-
    - Now we can search 'jwt-decode' in Google search engine.
    - To get OAuth dependencies, https://www.npmjs.com/package/jwt-decode
    - Copy right side code 'npm i jwt-decode'.
    - And paste it in terminal of VS code.
    - To paste we need to get into project's folder
    - '"jwt-decode": "^3.1.2",' -> It appears in package.json file as one of dependencies automatically.
    - We need to refer https://www.npmjs.com/package/jwt-decode this page documentation for how to use them to get GOAuth.
    - To decode it in Auth.js file.

Q3: Where we have saved our user data info?
Ans: At localstorage, we saved our user data information like name, email & picture.

     if(userData){
        window.localStorage.setItem("name",userData.name)
        window.localStorage.setItem("email",userData.email)
        window.localStorage.setItem("picture",userData.picture)
        return <User Data={userData}/>
    }
    let name=window.localStorage.getItem("name",userData.name)
    let email=window.localStorage.getItem("email",userData.email)
    let picture=window.localStorage.getItem("picture",userData.picture)
    if(name && email && picture){
        SetuserData({name,email,picture})
}




2 Likes

Sir I had a problem on 31.07.2023 session, It shows useState is not defined.

1 Like

import {useState} from “react”;

You haven’t imported useState.

Ques:-1) Which npm package we used to integrate Google oAuth ?
Ans:- First We need to install this Package (npm i @react-oauth/google) on Vs Code
=> After that we have to import this two npm Package to integrate Google oauth :-

  1. import { GoogleOAuthProvider } from ‘@react-oauth/google’;
  2. import { GoogleLogin } from ‘@react-oauth/google’;

Ques:-2) Which npm package we used to decode the response ?
Ans:- First We need to install this Package (npm i jwt-decode) on Vs Code
=> After that Import this Package
=> import jwt_decode from “jwt-decode”;

Ques:-3) Where we have saved our user data info ?

Ans:- We save our user Data in Local Storage
if (userData) {
window.localStorage.setItem(“name”, userData.name)
window.localStorage.setItem(“email”, userData.email)
window.localStorage.setItem(“picture”, userData.picture)
//then rerender this component user
return < User info={userData} />

}
1 Like

1Q. Which npm package we used to integrate Google oAuth ?

(npm i @react-oauth/google) package is used to integrate Google oAuth & we can refer package.json file to check whether it is installed or not i.e
[“@react-oauth/google”: “^0.11.1”]

2Q. Which npm package we used to decode the response ?
This (npm i jwt-decode) package is used to decode the response. Here jwt stands for JSON Web Token.
We can check whether it is installed or not by observing this line of syntax (“jwt-decode”: “^3.1.2”) in package.json file

3Q. Where we have saved our user data info ?

We have saved our user data info in Local Storage [http://localhost:3000]

1 Like

1-: “@react-oauth/google” package is used for google oAuth.
2-: “jwt-decode” package is used for credential response that is provide by google oAuth.
3-: in localstorage we have our saved data there we can set our data and also get our data.

1 Like