Effortless Secure Login & Signup in Minutes with Next.js and clerk
"Hello, I'm Palash Dhavle, a passionate software developer with a Master's Degree in Computer Applications. I specialize in crafting Python and JavaScript code to build dynamic applications. Through my blog, I share insights from my coding journey and explore the world of software development. Join me in this adventure of creativity, innovation, app development, and problem-solving. Welcome!
Prerequisites
Make sure you have:
Node.js (LTS version) installed
npm or yarn as a package manager
Git installed (optional but recommended)
Setting Up a Next.js Project
Open your terminal and run:
npx create-next-app@latest my-clerk-app
cd my-clerk-app
or using yarn:
yarn create next-app my-clerk-app
cd my-clerk-app
Start the development server:
npm run dev
or
yarn dev
Now, your Next.js project is ready! Next, we'll integrate Clerk for authentication.
Integrating Clerk
Create an account for clerk by going on https://clerk.com/
Once you sign in you should see this. Select all the forms of authentication you want and click on Create application
I simply follow the clerk’s instructions on how to install clerk and set up the env variables and setup the middle ware.
I usually follow everything as clerk says until setting up the middleware part. for the clerk provider I like to do things slightly differently.
I like to create a separate folder in my
srcdirectory called providersThere i create a file called
index.tsxwhere I create a component called providers and wrap the children of provider component into all the other providers which I’ll be using.
src/providers/index.tsx
'use client'
import { ClerkProvider } from '@clerk/nextjs'
import { nhost } from '../lib/nhost'
interface ProviderProps {
children: React.ReactNode
}
const Provider: React.FC<ProviderProps> = ({ children }) => {
return (
<ClerkProvider>
{children}
</ClerkProvider>
)
}
export default Provider
- Then I use this provider component to wrap my main content. This helps me keep my code clean
src/app/layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Provider from "@/providers";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<Provider>
{children}
</Provider>
</body>
</html>
);
}
- Then we can simply put the signin button on the app/page.tsx file like this. and run the project using yarn dev or npm run dev
import { SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/nextjs";
export default function Home() {
return (
<div className="flex justify-center items-center w-full h-svh">
<div className="text-center flex flex-col items-center justify-center gap-3">
<p className="text-3xl">Clerk Basic Setup</p>
<SignedOut>
<div className="w-fit px-8 py-2 border border-gray-400 rounded-md">
<SignInButton />
</div>
</SignedOut>
<SignedIn>
<div className="w-fit px-8 py-2 border border-gray-400 rounded-md">
<UserButton />
</div>
</SignedIn>
</div>
</div>
);
}
You are all set. You have ready to use authentication system on which you can build upon.
Results
- Clicking on signup button will show you this which you can use to sign up
On successful signup you can will be redirected to the same page which you were before than we can see that we can use the clerks in build account management.
we can check the dashboard and we’ll see that new account has been registered.
Thanks for taking the time to read my blog! I’d love to hear your thoughts, feel free to share your feedback or ask any questions in the comments. Your input helps me improve and create better content.
Until next time!
