Build SaaS with Ethan
Build SaaS with Ethan
  • Видео 34
  • Просмотров 294 948
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 - ruclips.net/video/2kgqPvs0j_I/видео.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 e...
Просмотров: 27 211

Видео

Build a password reset flow for your SaaS app! Next.js | Radix | Tailwind | Source Code
Просмотров 3,3 тыс.Год назад
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 - ruclips.net/vid...
Build your own ChatGPT with GPT-4 and Vercel AI in 10 minutes! Stream responses and custom prompts!
Просмотров 2,6 тыс.Год назад
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!
Просмотров 46 тыс.Год назад
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
Просмотров 3,9 тыс.Год назад
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
Просмотров 4,9 тыс.Год назад
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)!
Просмотров 17 тыс.Год назад
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!
Просмотров 55 тыс.Год назад
Set up Next-Auth with Next.js and Prisma with this ultimate guide!
How to set up Prisma with Next.js and Postgres!
Просмотров 35 тыс.Год назад
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!)
Просмотров 14 тыс.Год назад
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,8 тыс.Год назад
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,2 тыс.Год назад
Install Tailwind CSS with Next.js 13 App Directory
Getting started with Next.js 13's new app directory
Просмотров 1 тыс.Год назад
Getting started with Next.js 13's new app directory

Комментарии

  • @taufiqtab77
    @taufiqtab77 15 часов назад

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

  • @iam_qwerty
    @iam_qwerty 4 дня назад

    This is wonderful and well explained Thanks 👍🏼

  • @robb7148
    @robb7148 6 дней назад

    Great tutorial! Short and to the point. Thanks!

  • @RabiaInam
    @RabiaInam 12 дней назад

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

  • @RabiaInam
    @RabiaInam 12 дней назад

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

  • @AlexanderBelov-y8o
    @AlexanderBelov-y8o 12 дней назад

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

  • @eaoliver
    @eaoliver 13 дней назад

    Nice simple tutorial. Thanks

  • @CTFlink
    @CTFlink 20 дней назад

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

  • @vehktaur
    @vehktaur 23 дня назад

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

  • @junmanuellayese1545
    @junmanuellayese1545 27 дней назад

    Hi Ethan, do you have any updates on this?

  • @ABHISHEK_RANJAN01
    @ABHISHEK_RANJAN01 27 дней назад

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

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

    Great video Ethan, thank you!

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

    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 Месяц назад

    Awesome!

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

    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 Месяц назад

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

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

    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 Месяц назад

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

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

    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 12 дней назад

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

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

    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 Месяц назад

    Very helpful, thanks a lot!

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

    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 2 месяца назад

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

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

    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 2 месяца назад

    Thanks Bro ❤

  • @SonuSingh-sm7jy
    @SonuSingh-sm7jy 2 месяца назад

    can we store these images while our website is live?

  • @u.chaudhry2147
    @u.chaudhry2147 2 месяца назад

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

  • @RezaulKarim-xm1yv
    @RezaulKarim-xm1yv 2 месяца назад

    awesome Thanks a lot.

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

    but how can i access that with a URL??

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

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

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

      @@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 Месяц назад

      ​@@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 2 месяца назад

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

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

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

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

    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 2 месяца назад

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

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

    awesome!

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

    VERY HELPFUL THANKS ethen @Build SaaS with Ethan

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

    THANK YOU

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

    Men you save me again

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

    thanks, you saved me lot of time

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

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

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

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

    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 3 месяца назад

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

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

      This video doesn't help.

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

    One more thumbs up and we have the l33t code guys - 1337 vs 0!!

  • @ОльгаХайбулина-щ7е
    @ОльгаХайбулина-щ7е 3 месяца назад

    Thanks!!!!!

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

    Really helpful tutorial, after so much time spent on how to upload image in nextjs,I found this and it works so well...thanks a lot!

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

    Dude you are life saver man

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

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

  • @KiranKumar-or5uy
    @KiranKumar-or5uy 3 месяца назад

    Nice Lesson, Thank you Ethan.

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

    Thank you for your amazing video 🔥🔥🔥 I have a question : how to upload a file using nextjs structure /pages/api/upload.js into Laravel endpoint

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

    i wish you can do a tutorial on javascript too since im using javascript instead of ts while building T_T is a hell for me doing file upload for local. But above video is great using TS. i think i should get to TS learning