Create an app for app-native authentication
2 min

For this guide, we will walk you through setting up a simple Next.js application.

Open a terminal, change directory to where you want to initialize the project, and run the following command to create your first Next.js sample app.

Running the above command will generate a new folder named asgardeo-nextjs, containing a ready-to-use Next.js project set up with TypeScript. The project includes a development server that automatically reloads the app whenever changes are made.

npm create next-app@latest asgardeo-nextjs -- --yes

yarn create next-app@latest asgardeo-nextjs -- --yes

pnpm create next-app@latest asgardeo-nextjs -- --yes

Once this command is executed, if everything goes smoothly, your terminal output should resemble the following.

Create Next.js app

Once the application is created, navigate to the app folder. Then run the sample in the development mode. This allows you to see real-time updates and debug the app as you make changes.

cd asgardeo-nextjs
npm run dev

cd asgardeo-nextjs
yarn dev

cd asgardeo-nextjs
pnpm dev

This will start the Next.js development server, typically at http://localhost:3000, and you should see the default Next.js starter page. Confirm that everything is set up correctly by checking for the terminal output indicating that the server is running.

Navigate to localhost

At this point, you have a simple yet fully functional Next.js app. Now, it's time to integrate user authentication within the application. For this guide, we will be using the auth.js library, which provides a simple and secure way to handle authentication in Next.js apps.