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

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

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

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

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

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

      This video doesn't help.

  • @brandondermody8121
    @brandondermody8121 10 месяцев назад +4

    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!

    • @ScenicD
      @ScenicD 10 месяцев назад +1

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

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

      @/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);

  • @tsykin
    @tsykin 10 месяцев назад +14

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

    • @ojgaming7491
      @ojgaming7491 6 месяцев назад +5

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

  • @Abolnaga
    @Abolnaga Год назад +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 ❤

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

    Please can you let me know where you get the session

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

    how to change existing project?

  • @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.

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

    Hey Ethan, I have a Next.js frontend and a Strapi backend. It works fine on localhost, but when deployed on Railway, cookies aren't being set, so authentication fails. What do you think could be the issue?

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

    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"

  • @MayurNalwala
    @MayurNalwala 4 месяца назад

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

  • @zaid_ahmad25
    @zaid_ahmad25 11 месяцев назад +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 6 месяцев назад

      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

  • @ScenicD
    @ScenicD 10 месяцев назад +1

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

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

    How to integrate in custom pages

  • @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

  • @nasari7436
    @nasari7436 Год назад +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?

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

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

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

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

  • @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!

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

    That's pretty awesome! Thank you!

  • @Saramandili-b2b
    @Saramandili-b2b 9 месяцев назад

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

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

      excalidraw

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

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

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

    Very helpful, thanks a lot!

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

    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  Год назад +1

      Thank you, yes. Excellent suggestion!

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

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

  • @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.

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

    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

  • @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

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

    Would you please share Facebook login as well

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

    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

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

    Thank you. Another perfect tutorial 👌

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

    Good job!

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

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

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

    Greate tutorial.

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

    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  Год назад

      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.

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

    please. github provider sample

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

    awesome!

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

    Thanks thats exactly I wasnted

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

    excellent❤

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

    ty mate

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

    tysm!!!

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

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

  • @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!!

  • @Krystian-i1o
    @Krystian-i1o Год назад +2

    u miss a lot of steps

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

    Great

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

    make new one with Auth.js!!!

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

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

  • @Krystian-i1o
    @Krystian-i1o Год назад

    using zoom is anoying

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

    why such thumbnails ?