COMPLETE Google OAuth Tutorial - Next.js, Node.js, Express.js and PostgreSQL | Part 2

Поделиться
HTML-код
  • Опубликовано: 4 фев 2021
  • In this Part 2 of the mini-series Complete Google OAuth with Next.js, Node, Express, and Postgres, we will be integrating our OAuth endpoint on the Nodejs backend and consuming it on our Next.js and Chakra UI frontend which we are going to be building.
    _________________________________________________________
    IMPORTANT:
    Part 1 of COMPLETE Google OAuth Tutorial - Next.js, Node.js, Express.js and PostgreSQL: • Complete Google OAuth ...
    In summary, this is how Google OAuth works:
    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.
    Use of 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
  • НаукаНаука

Комментарии • 20

  • @fullstackmastery
    @fullstackmastery  3 года назад +1

    Part 1: ruclips.net/video/RkWPDBPkjXs/видео.html

  • @AgusJanardana
    @AgusJanardana 3 года назад +1

    You made a good video sirr, learn a lot from you ! i'm waiting your next tutorial, thankss !!

  • @everstockedegenie8409
    @everstockedegenie8409 Год назад

    How to get the id_token from session?

  • @siamahnaf6760
    @siamahnaf6760 2 года назад

    In frontend, You post by axios and send accessToken. In backend where you use that accessToken that come from req.body?

    • @fullstackmastery
      @fullstackmastery  2 года назад

      The authenticate middleware on the backend endpoint for oauth expects it.

  • @SaltyBoi420
    @SaltyBoi420 2 года назад

    please help, i got cors problem but i already enable it in the backend

    • @fullstackmastery
      @fullstackmastery  2 года назад +1

      Be sure that your API base URL on the frontend doesn't start with https.

    • @SaltyBoi420
      @SaltyBoi420 2 года назад +1

      hey man, thanks for replying. yes im sure my base url is http not htps

    • @fullstackmastery
      @fullstackmastery  2 года назад

      @@SaltyBoi420 how did you set up cors on the backend?

    • @SaltyBoi420
      @SaltyBoi420 2 года назад

      im using nest, i put the endpoint on get. whenever i hit that endpoint my backend will look for the user if not exist it will created a new user, if exist simply give the token

    • @SaltyBoi420
      @SaltyBoi420 2 года назад

      @@fullstackmastery i put app.enableCors({origin: true})