Building an Authentication Flow with Next.js, TailwindCSS, & AWS Amplify - OAuth & Email + Password

Building an Authentication Flow with Next.js, TailwindCSS, & AWS Amplify - OAuth & Email + Password

20.547 Lượt nghe
Building an Authentication Flow with Next.js, TailwindCSS, & AWS Amplify - OAuth & Email + Password
In this video I build a custom authentication flow from scratch in a Nextj.s app using AWS Amplify, TailwindCSS. We implement email + password flow as well as sign in with Facebook and Google. The code for this app is located here: https://github.com/dabit3/next.js-tailwind-authentication 0:00 - Introduction 1:05 - Project setup 3:55 - Creating OAuth Client 5:57 - Creating Facebook OAuth App 6:40 - Creating authentication service on AWS 8:43 - Adding navigation 11:14 - Adding a profile view 13:38 - Configuring redirect URIs 17:10 - Testing the OAuth providers 24:12 - Creating the sign in screen 38:23 - Creating the social sign in screen 45:06 - Creating a reusable Input component 46:00 - Creating the sign in form 52:20 - Creating the sign up form 55:25 - Creating the MFA confirmation screen 58:11 - Creating the forgot password and forgot password submit screens 1:12:02 - Fixing bugs 1:19:28 - Adding a protected route 1:24:00 - Enabling SSR support 1:28:45 - Implementing the Amplify UI component 1:32:53 - Conclusion