Complete Google OAuth with Next.js, Node, Express and Postgres | part 1
HTML-код
- Опубликовано: 3 фев 2021
- In this tutorial, I will walk you through a complete google OAuth login with Next.js, Node, Express, Postgres, Sequelize. And in this video, we are going to be setting up our express server in Nodejs and some configurations for the google OAuth strategy with passportjs.
So how does Google Oauth flow work?
Once a user clicks on the Oauth login button, our frontend sends a request to the Google authorization server through a browser redirect and obtains an access token that will grant access to the Google API. During the access-token request, our application sends one or more values in the scope parameter which controls the set of resources and operations that an access token permits.
After obtaining the access token, what happens next?
Our application makes a call to the Google API, setting the token in the HTTP Authorization request header. The access token will be valid only for the set of operations and resources described in the scope of the token request.
Our request is authenticated using passport.js authentication and sends the user’s profile info. We will receive the user’s profile info inside a passport verify callback whose purpose is to find the user that possesses the set of credentials.
Once authentication is successful, a session is established and maintained via a cookie set in the user’s browser. Each subsequent request will not contain credentials, but rather the unique cookie that identifies the session. Passport uses the serialize and deserialize functions to save the user’s ID to and from the session.
Understanding passport Serialize and Deserialize functions
serializeUser: Determines which data of the user object should be stored in the session. The result of the serializeUser method is attached to the session as req.session.passport.user
In our case only the user ID will be serialized to the session, keeping the amount of data stored within the session small.
deserializeUser: Used to retrieve the id stored in the session by the serializeUser function. This is where we make a backend call to get the user instance by that ID and attach it to the request object as req.user.
_________________________________________________________
Source Code: github.com/dieudonneAwa/googl...
Google Oauth flow diagram: drive.google.com/file/d/1pB9s...
___________________________________________
🙏 PLEASE SUBSCRIBE FOR MORE VIDEOS 👇
bit.ly/3cIb4er
____________________________________________
🔮OTHER VIDEOS YOU MIGHT LIKE👇👇
▶️ Responsive Hamburger menu React: • Responsive Hamburger m...
▶️Create Sequelize Migration and Association: • Create Sequelize Migra...
▶️How to create an animated modal in reactjs: • How to create a nicely...
▶️ How to render a list of todo objects in Reactjs: • Render a list of task ...
▶️How to setup sequelize and Postgres: • How to setup Sequelize...
▶️Password Reset using SendGrid: • Password Reset using S...
▶️ CRUD Operations with sequelize: • CRUD operations with S...
HELPFUL RESOURCES
Certified ScrumMaster Training: Get $200 off Today! Use this code SCRUM200
click.linksynergy.com/fs-bin/...
$2,760 in Savings: Premium PMP Exam Prep Boot Camp! Get everything you need to pass & enhance your skills
click.linksynergy.com/fs-bin/...
____________________________________________
Follow me on Social Media:
Facebook: profile.php?...
Twitter: awadieudone?s=09
GitHub: github.com/dieudonneAwa
Personal Blog: awadieudonne.com/
#googleoauth #google #oauth
KEYWORDS
Google OAuth login, google OAuth scopes, google OAuth redirect URI, google OAuth console, google OAuth consent screen, google OAuth credentials, google OAuth Nodejs, google OAuth API, google OAuth app, google OAuth API console, google OAuth app verification, google OAuth authorized domains, google OAuth authorization URL, using google earth, google OAuth button, google OAuth backend, google OAuth client, google OAuth callback URL, google OAuth consent screen localhost, google OAuth client id for google login, google OAuth client library, google OAuth developer console, google OAuth example, google OAuth email, google OAuth flow, google OAuth id, google OAuth integration, google OAuth in react, is google oauth2, google, OAuth javascript, google OAuth jwt 
Наука
Hello, thank you for your efforts! Does this tutorial handle token expiration?
It doesn't
Part 2: ruclips.net/video/mAl8_PYLBRo/видео.html
Hi, I'm new to programming, now im focusing on web dev starting some coding with Outh2. But, i have some different user like admin, stkaeholder, normal user but one passport js. How can i make different between any user each other? still confused :/
You don't need to differentiate between the different types of users. You just have to create Middlewares that will authorize users to access protected endpoints
@@fullstackmastery Ahh i see, thanks sir for the answer..
@@AgusJanardana You're welcome
brother after clicking create new credential app should we choose api key or oauth id when should we use oauth and when should we use api
You should choose API key. But, you can as well start Wirth OAuth ID.
@@fullstackmastery okay but whats the difference between choosing api key and choosing oauth client id
have you tried to use such setup, but with next-auth?
No I haven't. Have you? Tell me about it
@@fullstackmastery, lol, nope. Currently trying to decide and researching different ways. Stumbled on your implementation and also found this one:
arunoda.me/blog/add-auth-support-to-a-next-js-app-with-a-custom-backend
but the implementation details on the backend are pretty vague and really wasn't sure how storing user details in my DB would work with this.
Currently prefer the approach you've outlined in both vids as it's the same across various languages, but next-auth is just so seductively simple :D
I'll take a look at it. Thanks for sharing