Build a custom login page for your SaaS app with Next.js, Tailwind CSS, and Next Auth (App Dir)
If you’re building a Software as a Service (SaaS) application, one of the critical components you’ll need is a custom login page. In this article, we’ll show you how to create a professional, custom login page for your SaaS app using Next.js, Tailwind CSS, and Next Auth. Let’s get started!
Setting up Next.js
First, make sure you have Node.js and npm installed on your machine. Then, create a new Next.js app by running the following commands in your terminal:
npx create-next-app@latest my-saas-app
cd my-saas-app
Next, install Next Auth and Tailwind CSS by running the following commands:
npm install next-auth
npm install tailwindcss
Configuring Next Auth
Now that we have our Next.js app set up, we need to configure Next Auth. Create a new file called pages/api/auth/[...nextauth].js and add the following code:
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
export default NextAuth({
providers: [
Providers.Google({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET
}),
// Add more providers as needed
],
// Add any custom configurations here
})
Designing the login page with Tailwind CSS
Next, let’s create a custom login page using Tailwind CSS. Create a new file called pages/login.js and add the following code:
// pages/login.js
import { signIn } from 'next-auth/react'
export default function LoginPage() {
return (
Sign in to your account
)
}
Testing the login page
That’s it! You’ve now created a custom login page for your SaaS app using Next.js, Tailwind CSS, and Next Auth. You can test it out by running the following command in your terminal:
npm run dev
Open your browser and navigate to http://localhost:3000/login to see your custom login page in action. Users can now sign in to your SaaS app using their Google accounts!
Congratulations on building a custom login page for your SaaS app! You can further customize the login page by adding more providers, styles, and functionality to meet your specific requirements.
We hope this article has been helpful. Happy coding!
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?
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?
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?
Are usestate still a thing in nextjs app directory?
Great content! Just wonder how to not show the password in the URL when using a custom login page?
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.
15:48
How this automatically redirecting into login page when its protected by routes? i mean whats the code here!
My saviour 🙏
csrf token??
Loved the middleware exclusion pattern but what if I would also like to include the root page in that pattern?
how can i add a field userRole in my session or jwt based on my user.role field?
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 😊
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.
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?
how to hide navbar when login page with app dir
Love this channel. So clear and straight to the point. Good work!
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.
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!
Anyone tried to deploy this with vercel. It keeps me redirected at localhost when tying to login from the vercel app. I tried with NEXTAUTH_URL and without it and still no luck. On local env if i change the NEXTAUTH_URL it works fine and it redirects me to the corect url.
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!