Complete NextAuth Course

Name: Complete NextAuth Course
Rating: 4.4 (3 reviews)

To enable the social login with facebook, twitter, github, google and more by using auth0

Created byKim Chen

Last updated 2/2022

English

What you'll learn

Build a app with login function
Able to login with social account like facebook, twitter, github, google and microsoft
Passwordless email login
Tradition credentials email login

Course content

1 section • 12 lectures • 1h 12m total length

Setup project and install packages3:57
In this part, we are going to start the project, install the nextauth and the nodemailer.
Setup SendGrid for Nextauth3:27
In this part, we are going to setup SendGrid for the email provider.
Add firebase adapter3:45
In this part, we are going to add the firebase adapter, so the session, users and account data will be stored in firebase firestore
Add MongoDB adapter4:26
GitHub provider3:20
In this part, we are going to add the github provider to the nextjs app with NextAuth.
Twitter provider4:42
In this part, we are going to add the Twitter provider
Google provider4:08
In this part, we are going to add the google provider to the nextjs app. So the user can sign in with google account
Auth0 provider3:23
In this part, we are going to add the auth0 provider to the nextjs app. So user can sign in with different social account. In this example, we will use microsoft account to sign in.
Custom Sign in page6:00
Add the custom sign in page to create our own style of sign in page
Deploy Vercel3:34
Deploy the Next.js app to Vercel
Credential provider with MongoDB25:18
In this part, we are going to add the credential provider, this is a traditional email login method to login with mongoDB
Facebook provider6:47
In this part, we are going to add the facebook login to the Next.js app

Requirements

basic react

Description

Complete NextAuth course

In this project, we are going to implement the nextauth to our nextauth app. We will go through different provider like email provider, github provider, twitter provider, facebook provider and auth0 provider (which can login with microsoft, amazon, paypal, dropbox ,yahoo and yandex, etc.). In this example, we demonstrate how to login with microsoft account. We will also learn how to setup sendGrid so we can make a passwordless signin with email. Also, we will setup firebase adapter and mongodb adapter, so the users data will store in these database. At last, we will also deploy the app to the Vercel.

Why Nextjs?

All of the React components that make up a website's user-facing section are rendered on the server first. This means that after the HTML has been transmitted to the client (the user's browser), the user can read the material on the page without having to do anything further. The user perceives page loading speeds to be substantially faster as a result of this.

SSR also provides an out-of-the-box, indexable and crawlable website, which is critical for Search Engine Optimization (SEO) because no client-side javascript is required to view the page content. Essentially, increased technical SEO benefits our clients.

Why tailwindCSS?

Tailwind CSS is a popular low-level CSS framework with a lot of customization options. Bootstrap is widely used as a comparison. They are, nevertheless, essentially different. Rather of delivering pre-designed components like Bootstrap, Tailwind provides building pieces that allow developers to quickly create designs.

Why Daisy UI?

Daisy UI enhances Tailwind with attractive component classes that are totally customisable and themeable. Daisy UI creates a scalable and designer-friendly design system.

What we will cover

Using the react hook to check the user click on the inputbox or not, use the fontawesome, heroicon and daisy ui to help us create this beautiful ig login page. Take our css skill to next level by using the TailwindCSS and NextJS to build the login page.

Who this course is for:

Developers who want to build a real world app with Nextjs, nextauth, auth0 and tailwindCSS