Set up Google OAuth with Next.js using Next-Auth!

Поделиться
HTML-код
  • Опубликовано: 2 окт 2024

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

  • @Abolnaga
    @Abolnaga 11 месяцев назад +2

    Even though the information you provide is valuable, I am very impressed with your style and way of explaining. Good luck to you ... keep going ❤

  • @dragondevelop
    @dragondevelop 3 месяца назад +6

    at 14:40 of video, content of route.ts file which is visible in screen are completely changed

    • @Racine14
      @Racine14 Месяц назад +1

      This video doesn't help.

  • @tsykin
    @tsykin 7 месяцев назад +11

    You didn't show a lot of steps. This guide wasn't really helpful for me ((

    • @ojgaming7491
      @ojgaming7491 3 месяца назад +3

      He didn't exaplain anything about the jwt callback or the session callback that he added, just lazily added the github link.

  • @brandondermody8121
    @brandondermody8121 7 месяцев назад +3

    Hi :) I am a little confused.. I cannot see the lib folder properly, all thar part is missing! Is that in another video. My app says Module not found: Can't resolve '@/lib/session' Thanks millions!

    • @21Dimen
      @21Dimen 7 месяцев назад +1

      Did you ever find the solution? I noticed the same thing

    • @JacobTomczyk
      @JacobTomczyk 3 месяца назад

      @/lib/session is a reference to a local /lib/session or src/lib/session file. If you don't have such a file in your code it doesn't work.
      Right now to get user session you use :
      import { getServerSession } from "next-auth";
      import { options } from "@/app/api/auth/[...nextauth]/options";
      const session = await getServerSession(options);

  • @thiagoneves50
    @thiagoneves50 7 месяцев назад

    That's pretty awesome! Thank you!

  • @Krystian-i1o
    @Krystian-i1o 9 месяцев назад +2

    u miss a lot of steps

  • @ullaskunder
    @ullaskunder 11 месяцев назад

    Hello your videos and explanations are really helpful thank you so much recently I started a side micro project after bit of research I see there is no videos on "strip credits based payment system" there was one which was walk-through. It would be a big help if you make a video over that, plz do consider

  • @nasari7436
    @nasari7436 11 месяцев назад +2

    Awesome work! I've learned so much from your videos explanations and live series these past couple of days.
    Question: How much of what you've produced content wise can you say you've used during your time working as an engineer?

  • @helldrix_yt
    @helldrix_yt Год назад +3

    Thank you. Another perfect tutorial 👌

  • @21Dimen
    @21Dimen 7 месяцев назад +1

    Where does the lib/sessions come from? I am confused

  • @algorithmprime
    @algorithmprime 4 месяца назад +1

    Please can you let me know where you get the session

  • @zaid_ahmad25
    @zaid_ahmad25 8 месяцев назад +1

    Thank you so much for such a detailed video. Just had a quick question (im a newbie), how do we sign out? 😅

    • @JacobTomczyk
      @JacobTomczyk 3 месяца назад

      It might be a bit to late but maybe some other person will need it. After reading next-auth docs you can find that :
      GET /api/auth/signout
      Displays the built-in/unbranded sign out page.
      POST /api/auth/signout
      Handles signing the user out - this is a POST submission to prevent malicious links from triggering signing a user out without their consent. The user session will be invalidated/removed from the cookie/database, depending on the flow you chose to store sessions.
      So basically you sign out by doing either a request to one of those routes or by using the signOut method
      import { signOut } from "next-auth/react"
      export default () => signOut()}>Sign out

  • @kacperkepinski4990
    @kacperkepinski4990 9 месяцев назад +1

    how to change existing project?

  • @sneakylemon-u2z
    @sneakylemon-u2z 7 месяцев назад

    Great Video,
    I need help regarding handling errors.
    I'm using Google provider, and it everythings works fine however
    When I logged in, I choose my account and I cancel the consent permission prompt it will be redirected to /api/auth/signin?error=Callback The build in template with google button it says
    "Try signing in with a different account."
    I already identify my problem which is the cancellation of auth flow. and the console says [next-auth][error][OAUTH_CALLBACK_ERROR] message "access_denied"
    What I want to do is when the user cancel it I want it to go back in landing page which is "/"
    already looked at documentation and can't find solution or maybe I just don't understand it. please help.
    Thank you

  • @MayurNalwala
    @MayurNalwala Месяц назад

    Do we have to add NEXT_PUBLIC prefix for google's id and secret for 14?

  • @dorinoxani5026
    @dorinoxani5026 Год назад +1

    when it will be live sass coding? I really like it

    • @ethan_mick
      @ethan_mick  Год назад +1

      I'm glad you like it! Just taking some time off as I ramp up on a new project.

  • @syedbilalchand1766
    @syedbilalchand1766 5 месяцев назад

    How to integrate in custom pages

  • @bobbyyyy123a
    @bobbyyyy123a 9 месяцев назад

    Hi i just finished the previous video with the credentials provider, showing how we can store other information within the jwt that we get back. How can i incorporate this google OAuth with the credentials provider? The async signIn button does not work, with prisma saying "SELECT 1"

  • @ADNANEMANDILI
    @ADNANEMANDILI 6 месяцев назад

    please wht the name of the app that you use to do those diagrams

    • @ophatjb
      @ophatjb 6 месяцев назад +1

      excalidraw

  • @mistadeploytoon1749
    @mistadeploytoon1749 2 месяца назад

    What if user wants to update their gmail email address? with different gmail email address?

  • @HaythamHakim
    @HaythamHakim 10 месяцев назад

    What is the tool you are using to make the tutorial like writing on a whiteboard? Thanks for this :)

  • @mohdali-yq8gq
    @mohdali-yq8gq Год назад

    New subscriber!! I am really impressed by your great explanation and it is really useful. I sincerely request you to start some application series which can help a lot to masses

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

      Thanks and welcome! I have a series:
      Time Tracker: ruclips.net/user/live3lAsw0vNuDo?feature=share
      Converter: ruclips.net/user/livejEa7xJCqCxk?feature=share
      That are live series. I might do another that's all recorded depending on my work schedule.

    • @mohdali-yq8gq
      @mohdali-yq8gq Год назад

      @@ethan_mick great!!

  • @gamerhamim9110
    @gamerhamim9110 3 месяца назад

    PLEASE I BADLY NEED HELP
    You do not have permission to sign in. i did everything correctly

  • @sovannborithyun5205
    @sovannborithyun5205 7 месяцев назад

    Would you please share Facebook login as well

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

    I'm having doubts on how to add this google provider to the existing credentials provider you explained on a previous video. How should we handle callbacks and jwt there?

    • @ethan_mick
      @ethan_mick  Год назад +2

      You should be able to lookup the user by their email. If you find the user, then you can use that user and it's primary key for the JWT. Otherwise you can just-in-time provision a user.
      Once a user has been created with OAuth, they can add a password in their profile to login sans OAuth. But they'll need to login via OAuth first to do that. Or do a password reset flow!

  • @leesangbin
    @leesangbin 10 месяцев назад

    please. github provider sample

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

    Great video! Have you run into issues with refreshing the token? Using a DB strategy with session and jwt callbacks and I'm unable to refresh the token when it expires. Would using JWT be better? Err: invalid_token

    • @ethan_mick
      @ethan_mick  Год назад +1

      I haven't tried the DB session strategy often with Next-Auth. I'm a huge fan of JWT's for most projects. I think it also pairs nicely with OAuth here. I'd try that strategy and see if it works well. You can extend the session length if you want, so users don't need to login as often.
      Otherwise, I can make a sample project and see if there are any sharp edges you might be hitting.

  • @guanjunliu9544
    @guanjunliu9544 2 месяца назад

    Very helpful, thanks a lot!

  • @UIDEVELOPER
    @UIDEVELOPER 3 месяца назад

    awesome!

  • @shraj340
    @shraj340 5 месяцев назад

    Thanks thats exactly I wasnted

  • @kristiankanya431
    @kristiankanya431 11 месяцев назад

    My app has three sign-in options atm: google oauth, facebook oauth, and regular username/pw. I added this line to the top of the signIn method: `if (account?.provider === 'credentials') return true`, as `profile` is empty when you're signing in without oauth, and we don't want to do the upsert.

    • @ethan_mick
      @ethan_mick  11 месяцев назад +1

      Thank you, yes. Excellent suggestion!

    • @kristiankanya431
      @kristiankanya431 11 месяцев назад

      @@ethan_mick Is that how you would’ve handled it?

  • @Krystian-i1o
    @Krystian-i1o 9 месяцев назад

    using zoom is anoying

  • @rootbindev
    @rootbindev 9 месяцев назад

    Great

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

    great video! but im facing a problem that i dont find the solution anywhere, if we console.log(profile) we have an objetic with many keys such as email, name, locale, but in the route.ts file when i try to get the locale i got an error related to the types, basically typescript only recognizes 4 keys from the many that the profile object has, can u guys helpe me with this?

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

      How are you getting the locale/profile in your route file?
      And are the keys basically name, email, and image?
      If so, you need to pass through the extra properties into the JWT as *well* as the session, take a look at this: ruclips.net/video/2kgqPvs0j_I/видео.htmlsi=PTQWLkEo6PkzKJp2&t=1483

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

      @@ethan_mick im getting the locale by the signIn({profile}), when i type 'profile.'' i only have acces to name, email, sub, however if I type profile.locale i do acces the value but the lint says that profile does not have a prop called locale

  • @shailendraryvensingh
    @shailendraryvensingh 6 месяцев назад

    Awesome, I see🙆🏻🙆🏻
    Thank you so much 😊

  • @alowais900
    @alowais900 11 месяцев назад

    Ethan! You delivered another banger once again! Thank you so much for fulfilling my request around handling env variables for production vs dev from the "Set up Next-Auth with Next.js and Prisma with this ultimate guide!" video.
    The way you explained OAuth really laid the foundation for me to do further research on the topic to understand how it works behind the scenes.
    I do have a question for you, if I were looking to integrate with a third party API (i.e. Calendly's API). Would you use next-auth to handle and store the access tokens sent from Calendly's Authorization servers? Or is the idea with next-auth is to primarily focus on managing authentication and user sessions?

    • @ethan_mick
      @ethan_mick  11 месяцев назад

      I'd only use Next-Auth for *your* users and your frontend. When the user accesses OAuth of another app on your behalf (third party integration) your app will get an access_token and a refresh_token. Save those to the user in your database and you can use them forever on behalf of the user. No JWTs or complicated auth necessary.

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

    Thank you. I would like to see how to use Middleware to protect routes.

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

      Check this out! ruclips.net/video/2kgqPvs0j_I/видео.html

  • @leesangbin
    @leesangbin 10 месяцев назад

    excellent❤

  • @bikerd12
    @bikerd12 8 месяцев назад

    Greate tutorial.

  • @garikmelqonyan6011
    @garikmelqonyan6011 8 месяцев назад

    Good job!

  • @27sosite73
    @27sosite73 8 месяцев назад

    ty mate

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

    Thanks, Ethan. Your videos are always helpful as always.

  • @italovisconti
    @italovisconti 6 месяцев назад

    tysm!!!

  • @SoulePsycle
    @SoulePsycle 3 месяца назад

    make new one with Auth.js!!!

    • @SoulePsycle
      @SoulePsycle 3 месяца назад

      Your explanation is clean and straight to the point that others can't!

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

    why such thumbnails ?