Landen  Brown

Landen Brown

1626084960

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

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

#tailwindcss #aws amplify #next #next.js

What is GEEK

Buddha Community

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

Landen Brown

1626084960

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

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

#tailwindcss #aws amplify #next #next.js

Landen  Brown

Landen Brown

1626059160

Next.js with AWS Amplify Admin UI Crash Course

In this video you’ll learn how to build a full stack Next.js app on AWS in less than 25 minutes. You’ll learn how to deploy an API on AWS and connect a Next.js front end, implementing markdown rendering, build time data fetching, dynamic routes to pre-render based on data, SSR, fallback routes, revalidation, and client data fetching.

The code for this project is located here: https://github.com/dabit3/next.js-amplify-datastore
To learn more about Amplify, see the documentation here: https://docs.amplify.aws/
Check out the Amplify Admin UI sandbox here: https://sandbox.amplifyapp.com/

#next #next.js #aws amplify

Landen  Brown

Landen Brown

1626073860

Next.js on Fargate - Serverless Container Hosting with Docker and AWS Amplify

In this video we’ll start from scratch, creating a new Next.js app and then initializing a new Amplify project in the Next.js app directory. We’ll then configure a custom domain and deploy the Next.js app to Amazon ECS on AWS Fargate using the Amplify CLI using the custom domain.

Delete all infrastructure at any time by running “amplify delete”.

0:00 – Introduction
1:00 – Initializing the project
2:18 – Configuring the custom domain
4:33 – Enabling Fargate Hosting with the Amplify CLI
5:46 – Configuring the Dockerfile
7:27 – Testing the Docker image locally
8:32 – Deploying the app to Fargate using the Amplify CLI
12:00 – Conclusion

Dockerfile: https://gist.github.com/dabit3/6eb125dad05c1b1723bc44b6618e8ac4
Amplify Container docs: https://docs.amplify.aws/cli/usage/containers#hosting
Blog post: https://dev.to/dabit3/serverless-containers-with-next-js-aws-fargate-and-aws-amplify-17fe

#aws amplify #next.js #next #serverless container #docker

Seamus  Quitzon

Seamus Quitzon

1601341562

AWS Cost Allocation Tags and Cost Reduction

Bob had just arrived in the office for his first day of work as the newly hired chief technical officer when he was called into a conference room by the president, Martha, who immediately introduced him to the head of accounting, Amanda. They exchanged pleasantries, and then Martha got right down to business:

“Bob, we have several teams here developing software applications on Amazon and our bill is very high. We think it’s unnecessarily high, and we’d like you to look into it and bring it under control.”

Martha placed a screenshot of the Amazon Web Services (AWS) billing report on the table and pointed to it.

“This is a problem for us: We don’t know what we’re spending this money on, and we need to see more detail.”

Amanda chimed in, “Bob, look, we have financial dimensions that we use for reporting purposes, and I can provide you with some guidance regarding some information we’d really like to see such that the reports that are ultimately produced mirror these dimensions — if you can do this, it would really help us internally.”

“Bob, we can’t stress how important this is right now. These projects are becoming very expensive for our business,” Martha reiterated.

“How many projects do we have?” Bob inquired.

“We have four projects in total: two in the aviation division and two in the energy division. If it matters, the aviation division has 75 developers and the energy division has 25 developers,” the CEO responded.

Bob understood the problem and responded, “I’ll see what I can do and have some ideas. I might not be able to give you retrospective insight, but going forward, we should be able to get a better idea of what’s going on and start to bring the cost down.”

The meeting ended with Bob heading to find his desk. Cost allocation tags should help us, he thought to himself as he looked for someone who might know where his office is.

#aws #aws cloud #node js #cost optimization #aws cli #well architected framework #aws cost report #cost control #aws cost #aws tags

Eva  Murphy

Eva Murphy

1625689020

Next JS Handling Email Verification token on Server Side in Next js To Check Token - 18

In this video, I am going to show you the code behind verifying the token that a user will get on his/her email. We will be looking at the feature of doing server-side API calls inside Next JS to verify the token from the dynamic URL that we have created. Once the token is verified, we will automatically log in the user and take his/her to the dashboard.

Frontend: https://github.com/amitavroy/video-reviews
API: https://github.com/amitavdevzone/video-review-api
App link: https://video-reviews.vercel.app

You can find me on:
Twitter: https://twitter.com/amitavroy7​
Discord: https://discord.gg/Em4nuvQk

#next js #token #next #email