Build SaaS with Ethan
Build SaaS with Ethan
  • 34
  • 310 126
Set up Google OAuth with Next.js using Next-Auth!
Setting up OAuth is more than just writing a little code. You need to configure the app with your identity provider and ensure the configuration is correct. This guide walks you through how to set it up end-to-end with Google as the identity provider.
📰 Newsletter 📰
Sign up for my newsletter, "A Bit of SaaS," to keep you informed, inspired, and engaged with the latest trends, tips, and resources in the ever-evolving SaaS industry.
ethanmick.com/newsletter/
🎬 Related Videos 🎬
• Set up Next Auth - ua-cam.com/video/2kgqPvs0j_I/v-deo.html
📜 Code 📜
• ethanmick.com/how-to-set-up-google-oauth-with-next-js-using-next-auth/
🔗 Links 🔗
• console.cloud.google.com/
👨🏼‍💻 About Me 👨🏼‍💻
I am a principal software engineer and architect who loves building cool cloud software.
• Website: ethanmick.com/
• GitHub: github.com/ethanmick
• Twitter: Ethan_Mick
• LinkedIn: www.linkedin.com/in/ethan-mick/
• Agency: ethanmick.dev/
🔖 Chapters 🔖
00:00 - Intro
00:23 - OAuth
03:29 - Google Setup
11:30 - The Code
17:36 - Production
20:38 - Outro
Переглядів: 30 296

Відео

Build a password reset flow for your SaaS app! Next.js | Radix | Tailwind | Source Code
Переглядів 3,4 тис.Рік тому
Learn how to build a password reset flow for your SaaS app. Requires you to have the user's email to send them the password reset email. 📰 Newsletter 📰 Sign up for my newsletter, "A Bit of SaaS," to keep you informed, inspired, and engaged with the latest trends, tips, and resources in the ever-evolving SaaS industry. ethanmick.com/newsletter/ 🎬 Related Videos 🎬 • Verify Email - ua-cam.com/vide...
Build your own ChatGPT with GPT-4 and Vercel AI in 10 minutes! Stream responses and custom prompts!
Переглядів 2,7 тис.Рік тому
Build a ChatGPT clone in mere minutes with these powerful new libraries. Streaming responses and custom prompts! 📰 Newsletter 📰 Sign up for my newsletter, "A Bit of SaaS," to keep you informed, inspired, and engaged with the latest trends, tips, and resources in the ever-evolving SaaS industry. ethanmick.com/newsletter/ 📜 Code & Docs 📜 SOURCE CODE • ethanmick.com/build-your-own-chatgpt-with-gpt...
File Upload in Next.js 13 App Directory with NO libraries! Client and React Server Components!
Переглядів 49 тис.Рік тому
Easily upload files and then use them server-side in Next.js 13! In the past, you would need to use third-party libraries to help with this, but NO MORE. See how you can upload files easily in client and server components. 📰 Newsletter 📰 Signup for my newsletter, "A Bit of SaaS," to keep you informed, inspired, and engaged with the latest trends, tips, and resources in the ever-evolving SaaS in...
Verify an email during user registration with Next.js 13! Mailgun and React Server Components!
Переглядів 12 тис.Рік тому
Verify an email during user registration with Next.js 13! Mailgun and React Server Components!
The Ultimate Button with React Aria! Build a React Component Library with Tailwind CSS & Next.js
Переглядів 4 тис.Рік тому
The Ultimate Button with React Aria! Build a React Component Library with Tailwind CSS & Next.js
Add Variants and Loading to your Button! Build a React Component Library with Tailwind CSS & Next.js
Переглядів 6 тис.Рік тому
Add Variants and Loading to your Button! Build a React Component Library with Tailwind CSS & Next.js
Basic Button: Build a React Component Library with Tailwind CSS, TypeScript, React, and Next.js
Переглядів 5 тис.Рік тому
Basic Button: Build a React Component Library with Tailwind CSS, TypeScript, React, and Next.js
Build a REST API in Next.js 13 app directory! Master RESTful techniques and paging w/ Prisma & Auth!
Переглядів 9 тис.Рік тому
Build a REST API in Next.js 13 app directory! Master RESTful techniques and paging w/ Prisma & Auth!
Build a custom login page for your SaaS app with Next.js, Tailwind CSS, and Next Auth (App Dir)!
Переглядів 18 тис.Рік тому
Build a custom login page for your SaaS app with Next.js, Tailwind CSS, and Next Auth (App Dir)!
Build a custom register page for your SaaS app with Next.js, Tailwind CSS, and Next Auth (App Dir)!
Переглядів 8 тис.Рік тому
Build a custom register page for your SaaS app with Next.js, Tailwind CSS, and Next Auth (App Dir)!
Set up Next-Auth with Next.js and Prisma with this ultimate guide!
Переглядів 57 тис.Рік тому
Set up Next-Auth with Next.js and Prisma with this ultimate guide!
How to set up Prisma with Next.js and Postgres!
Переглядів 39 тис.Рік тому
How to set up Prisma with Next.js and Postgres!
FIRST LOOK! Next.js App Directory API Routes! (Canary Build, Brand New!)
Переглядів 2,1 тис.Рік тому
FIRST LOOK! Next.js App Directory API Routes! (Canary Build, Brand New!)
Build a contact form and send an email with React + Next.js (End-To-End!)
Переглядів 15 тис.Рік тому
Build a contact form and send an email with React Next.js (End-To-End!)
Let's Build... A Clock! Make a digital clock with Next.js, React, Tailwind and TypeScript!
Переглядів 2,9 тис.Рік тому
Let's Build... A Clock! Make a digital clock with Next.js, React, Tailwind and TypeScript!
Install Tailwind CSS with Next.js 13 App Directory
Переглядів 4,4 тис.Рік тому
Install Tailwind CSS with Next.js 13 App Directory
Getting started with Next.js 13's new app directory
Переглядів 1,1 тис.Рік тому
Getting started with Next.js 13's new app directory

КОМЕНТАРІ

  • @dw31415
    @dw31415 7 днів тому

    Exactly the overview I was looking for, thanks! I'm surprised there is not more indication in the "MyComponent" that it is server rendered. I'm a bit concerned it makes it harder to read and reason about what a large codebase is doing. Any thoughts?

  • @sdhimal6597
    @sdhimal6597 16 днів тому

    exactly what I was looking for thanks!

  • @teukurian090598
    @teukurian090598 18 днів тому

    Liking cuz I got the 69th like

  • @rjl6814
    @rjl6814 25 днів тому

    can anyone help me using multer

  • @danielaquilino4805
    @danielaquilino4805 26 днів тому

    When i try to migrate am receiving : Error: Failed to create a new migration directory. 0: schema_core::state::CreateMigration with migration_name="init" draft=false at schema-engine\core\src\state.rs:247

  • @tomasponce9409
    @tomasponce9409 Місяць тому

    Excelente explicación, muchas gracias por tu ayuda!

  • @anton.sokol812
    @anton.sokol812 Місяць тому

    giga-huge respect for a video! exactly what I need right now! Like, subscription and comment from me 🎉

  • @oemeraran8183
    @oemeraran8183 Місяць тому

    Did you try react-aria-components already? The setup is a lot simpler that way.

  • @sundoel
    @sundoel Місяць тому

    Stright to the point, easy to follow, clear explanations, thank you so much, have a nice day !

  • @iam_qwerty
    @iam_qwerty 2 місяці тому

    This is wonderful and well explained Thanks 👍🏼

  • @robb7148
    @robb7148 2 місяці тому

    Great tutorial! Short and to the point. Thanks!

  • @RabiaInam
    @RabiaInam 2 місяці тому

    u earn a subscription sir.......thanks for millions time or more over

  • @RabiaInam
    @RabiaInam 2 місяці тому

    Thanks alot Ethan!!!!keep it up and keep forward u done best and its best to learn from u..

  • @AlexanderBelov-y8o
    @AlexanderBelov-y8o 2 місяці тому

    const imagePath = join(process.cwd(), 'public/images', imageFile.name)

  • @eaoliver
    @eaoliver 2 місяці тому

    Nice simple tutorial. Thanks

  • @CTFlink
    @CTFlink 2 місяці тому

    teaching and presenting skills are through the roof! THANK YOU! Instant subscribe.

  • @vehktaur
    @vehktaur 2 місяці тому

    I've been looking for this exact info for hours now. Thank you for this

  • @junmanuellayese1545
    @junmanuellayese1545 2 місяці тому

    Hi Ethan, do you have any updates on this?

  • @ABHISHEK_RANJAN01
    @ABHISHEK_RANJAN01 2 місяці тому

    Thank you so much sir for such a simple and great explanatin...😇

  • @isaaclongoria229
    @isaaclongoria229 2 місяці тому

    Great video Ethan, thank you!

  • @TypeScriptTV
    @TypeScriptTV 2 місяці тому

    Thanks for sharing! I've seen many tutorials using third-party services for this, so it's great to know you can do it with Server Actions instead! 💪

  • @baljka17
    @baljka17 3 місяці тому

    Awesome!

  • @ranatariqnajam
    @ranatariqnajam 3 місяці тому

    Hi, Mate i saw your video about postgres it is very nice and informative, i understand it well, But when you entered the command into terminal , please also mention the command for windows users. Thanks

  • @codeddesign
    @codeddesign 3 місяці тому

    Thanks brother, i was stuck for 5 day and now i am good to go.

  • @FrenchBaguette69
    @FrenchBaguette69 3 місяці тому

    hi i get unhandeled runtime error: Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Form`.

  • @MayurNalwala
    @MayurNalwala 3 місяці тому

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

  • @disciplines4
    @disciplines4 3 місяці тому

    Those who are suffering from "error: no such file or directory" try this, it make a folder in you codebase. const path = join(__dirname, file.name);

    • @AlexanderBelov-y8o
      @AlexanderBelov-y8o 2 місяці тому

      const imagePath = join(process.cwd(), 'public/images', imageFile.name)

  • @disciplines4
    @disciplines4 3 місяці тому

    Your video is fire, i implemented on a project in my company and the project was in production. It worked very well, thank you.

  • @guanjunliu9544
    @guanjunliu9544 3 місяці тому

    Very helpful, thanks a lot!

  • @wolfie8748
    @wolfie8748 3 місяці тому

    but this is basically me messaging me ? when I check who sent the email it is the user we entered so how can random people mail me for my portfolio website?

  • @visheshmp
    @visheshmp 3 місяці тому

    you are just amazing!!!! the way you explain the things was quite simple. no need to install 25 packages from npm.

  • @ibrahimqaiser4097
    @ibrahimqaiser4097 3 місяці тому

    Bro, you brought the understanding of nextjs server components to a simplified level which can cause a great misunderstanding among newbies. Thanks, bro

  • @pratyushkarn1133
    @pratyushkarn1133 4 місяці тому

    Thanks Bro ❤

  • @SonuSingh-sm7jy
    @SonuSingh-sm7jy 4 місяці тому

    can we store these images while our website is live?

  • @u.chaudhry2147
    @u.chaudhry2147 4 місяці тому

    This dude solved my problem I had for two weeks. He deserves way much more subscribers

  • @RezaulKarim-xm1yv
    @RezaulKarim-xm1yv 4 місяці тому

    awesome Thanks a lot.

  • @kalanishivam
    @kalanishivam 4 місяці тому

    but how can i access that with a URL??

    • @sidyboy6998
      @sidyboy6998 3 місяці тому

      Have you found any solution? If yes can you please share your approach

    • @kalanishivam
      @kalanishivam 3 місяці тому

      @@sidyboy6998 const data = await file.arrayBuffer(); const randomString = randomBytes(8).toString('hex'); const fileName = `${Date.now()}_${randomString}_${file.name}`; const filePath = path.resolve('public/uploads', fileName); await fs.writeFileSync(filePath, Buffer.from(data)); ...and the url will be available const imageUrl = `/uploads/${fileName}`; the file can be accesed by going to the base url + the imageUrl .......this is how u can do it with the fs module, this approach will write files inside the upload folder in the project itself but make sure u have a folder named uploads in the public folder or u can also use cloud storage like cloudinary to store files online and get their url from the cloud itself, both work very well.

    • @kalanishivam
      @kalanishivam 3 місяці тому

      ​@@sidyboy6998 const data = await file.arrayBuffer(); const randomString = randomBytes(8).toString('hex'); const fileName = `${Date.now()}_${randomString}_${file.name}`; const filePath = path.resolve('public/uploads', fileName); fs.writeFileSync(filePath, Buffer.from(data)); const imageUrl = `/uploads/${fileName}`;...make sure u have a fodler inside public named uploads...the url will be the base url/uploads/fileName . or u can also use cloud services like cloudinary to directly upload that on the cloud and get url from that

  • @blobropch0p
    @blobropch0p 4 місяці тому

    wtf just read your blog, i just discovered you man, sigh... best of luck

  • @blobropch0p
    @blobropch0p 4 місяці тому

    exactly what i was looking for thanks you are a life saver

  • @h13q18
    @h13q18 4 місяці тому

    If you are trying to use prisma with supabase add in .env file variable with name DIRECT_URL, which will be the same as DATABASE_URL, but will have a 5432 port, instead of 6543. After that update your schema.prisma file and add directUrl after url. It will look like this: datasource db { provider = "postgresql" url = env("DATABASE_URL") directUrl= env("DIRECT_URL") }

  • @mistadeploytoon1749
    @mistadeploytoon1749 4 місяці тому

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

  • @UIDEVELOPER
    @UIDEVELOPER 4 місяці тому

    awesome!

  • @oii0712
    @oii0712 4 місяці тому

    VERY HELPFUL THANKS ethen @Build SaaS with Ethan

  • @lhfskal
    @lhfskal 4 місяці тому

    THANK YOU

  • @Benicioplay6y
    @Benicioplay6y 4 місяці тому

    Men you save me again

  • @huzaifaqayyum786
    @huzaifaqayyum786 4 місяці тому

    thanks, you saved me lot of time

  • @billma1516
    @billma1516 4 місяці тому

    You save a file outside the Nextjs folder, How can Nextjs read it?

  • @SoulePsycle
    @SoulePsycle 5 місяців тому

    make new one with Auth.js!!!

    • @SoulePsycle
      @SoulePsycle 5 місяців тому

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

  • @Fabbaist11
    @Fabbaist11 5 місяців тому

    I noticed you searching through a long list of commands when searching for docker postgres in the terminal. What are you using to do that?

  • @dragondevelop
    @dragondevelop 5 місяців тому

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

    • @Racine14
      @Racine14 2 місяці тому

      This video doesn't help.