Build a custom login page for your SaaS app with Next.js, Tailwind CSS, and Next Auth (App Dir)!

📰 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.

🔖 Chapters 🔖
00:00 - Intro
00:41 - Login Page
05:55 - Polish
13:27 - Middleware Protection
16:00 - Outro

📜 Code 📜
Free with member signup!

🔗 Links 🔗

👨🏼‍💻 About Me 👨🏼‍💻
I'm Ethan Mick, and I'm here to help you make money from writing software, learn how to launch great products, and help more people too. I'm building a community of like-minded individuals who help others and love writing code.

[xtz_]

Man keep going ur videos are so helpful 🔥, thanks 🙏

[Mantenner]

Another great episode mate, getting closer to having a full site made up now with your help! Getting more comfortable with the CRUD side of postgres and next.js. Keen to move on to the next video.

[logistics_guy]

Love this channel. So clear and straight to the point. Good work!

[gamescope]

Hello, thanks for the video. I have a question about how to implement multiple custom logins for different user roles, such as clients and administrators. Can you provide some guidance on this?

[KelberStuchi]

user roles like admin, reviewer and user to complete authentication. Tks

[aqmalcode]

I hope ur, make crud with image upload with next js 13.

BTW great video

[raymondmichael]

I’ll look into this later, because lately I spend few projects on clerk now had to come back to next-auth but things was little bumpy 😊

[ziaahmad]

Hi, I can't my wrap my head around how I can redirect users to dashboard if they are logged in already. I want to do this via a middleware. I tried to use `getServerSession` but that does not work in middleware.

[irtazahussain]

pl share the github repo for better understanding. I want to see the NextAuth part. I've to login from my own external endpoints and create a user session in NextAuth. But I'm not getting the credentials that I'm sending from signIn function of NextAuth.

[nasarissa]

Great episode.
1) I noticed during the middleware section that my home page was protected as well. What is the way to unprotect it along with register, api and login?
2) Is there a downside to not protecting your api folder?
3) I redirect to signin after registering a user. Once I sign in, the app redirects back to the signin page rather than dashboard. It works normally if I start from home page, then signin page, then dashboard. Any ideas why that happens?

#EDIT# My signin page url has a callback to signup. Do I need to use useRouter in my signup page rather than using nextAuth's signIn() functionality when I successfully signed up a user?

[geraldaburto]

I have a problem with the middleware setting, It also protect files in /public folder, so I can't access them from the login page, how can I fix this?

[vincentgauthier]

how can this work with auth0 provider? ideally id like to show all the options auth0 has.

[franckray]

Great content! Just wonder how to not show the password in the URL when using a custom login page?

[ronaldpaek]

Your content is so good, I've been looking for these solutions for the past month, will you also be showing how you can use stripe payments with route handler API vs the pages API? thank you so much for this!

[anuj]

Great explanation sir. Could you please make a tutorial on best way to protect routes in react. Thankyou

[joylodralive]

Hi, ethan thanks for making the video! Can you talk about how to save states in the local storage in next 13? Or have you ever made an article about it? Thank you!

[tunaralyarzada]

amazing brother! I am about done auth part, so i am gonna pass to opearations like fetching data or crud operations. but just have a quick question to u:) when i get session object, as you know we dont get accessToken property. so do we really need it or not? cause i wanna send request to for instance "/product" root to fetch some products with axios. so do i need send accessToken in header part of axios to check if i am authenticated in api route handler. or we just should write getServerSession() to get session object in api handler file and check authentification?

[LuisCastroem]

Loved the middleware exclusion pattern but what if I would also like to include the root page in that pattern?

[KarimFawaz]

Thanks for the videos, really amazing!. One thing tho, after adding the folders to (app) and (auth) and changing the middleware configuration, the login and sign up pages look very different. I created my own form instead of the prebuilt ones you used and now the form shrunk and the image I had is not accessible. Any ideas?

[coderwala]

15:48
How this automatically redirecting into login page when its protected by routes? i mean whats the code here!