Next.js Quickstart: Page Router

Set up a client in MonoCloud

In MonoCloud, you can create different clients. Each one represents an application you want to secure with MonoCloud. To get started, create a client configuration for the Next.js app we'll create in this guide:

1. Sign up for a MonoCloud account: It's free and takes only a minute.
2. Create a client: On your MonoCloud Dashboard, click Add Clients then follow the prompts to create a Web Application client.

Configure your new client

On your new client's overview page, scroll down to the URLs section and add the following:

• Callback URIs: Where to redirect users after a successful sign-in.
• Sign-out URIs: Where to redirect users after they've signed out.

Set the Callback URIs to http://localhost:3000/api/auth/callback and the Sign-out URIs to http://localhost:3000.

Next, scroll to the Scopes section where you'll find two types of scope:

• Identity scopes: A collection of claims available in the id_token for use by the client.
• API scopes: The resources users can access and a collection of claims made available in the access token for the API.

Select openid, profile, and email in Identity scopes. We can leave API scopes for now.

Create a fresh Next.js app

If you don't have one yet, set up a fresh Next.js app by running the following command in your terminal:

npx create-next-app@latest quickstart

This command will create a new Next.js application in a directory named 'quickstart'.

It will ask you some configuration questions. The ones to look out for are:

• Select Yes for Would you like to use TypeScript?
• Select Yes for Would you like to use src/ directory?
• Select No for Would you like to use App Router? (recommended)

In this guide, we're working with the Next.js Page Router. See the App Router version of this guide if you prefer.

Next install the MonoCloud SDK for Next.js. In your new project directory, run:

npm install @monocloud/nextjs-auth

Add MonoCloud as the auth provider

Now that we have a header, we need to render it and manage authentication state.

On the client-side, we'll do that using the MonoCloudAuthProvider component from the MonoCloud SDK. This component takes care of:

1. Keeping the session updated and synchronized between different tabs and windows.
2. Sharing the session object across components using React Context, but only for client-rendered components.

In the src/pages folder of your Next.js project you'll find _app.tsx. Open the file in your editor and replace the contents with the following code:

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { MonoCloudAuthProvider } from "@monocloud/nextjs-auth/client";
import Header from "@/components/header";

export default function App({
  Component,
  pageProps: { session, ...pageProps }
}: AppProps) {
  return (
    <MonoCloudAuthProvider>
      <Header />
      <Component {...pageProps} />
    </MonoCloudAuthProvider>
  )
}

Here, we're importing the MonoCloudAuthProvider component and using it to wrap the page contents. This allows us to share the session object across components using React Context for client-rendered components.

Configure the authentication handler

Next we'll set up the handler that will interact with MonoCloud on the server-side of your Next.js app.

We'll start by creating the folders we need and a catch-all route.

1. In src/pages/api, create a new folder named auth.
2. Inside auth, set up our catch-all route by creating a file named [...monocloud].ts.

In that new file, paste the following code:

import { monoCloudAuth } from "@monocloud/nextjs-auth";

export default monoCloudAuth();

monoCloudAuth() adds the core authentication functionality, including:

• signin: Handles sign-in requests from the browser.
• signout: Handles sign-out requests from the browser.
• userinfo: Fetches profile data for the currently signed-in user.
• callback: Processes the callback from MonoCloud after authentication and sets up the session.

Create the server rendered page

In this quickstart, we're not protecting any particular pages or endpoints. Instead, we're logging a user in and displaying their session and user information.

In a real application, protect individual pages using protectPage() or protect several pages and endpoints using monoCloudMiddleware().

1. Inside your project's src/pages folder create a new folder named server.
2. Inside that folder create index.tsx and add the code below:

import { getSession } from '@monocloud/nextjs-auth';
import { InferGetServerSidePropsType, NextApiRequest, NextApiResponse, GetServerSideProps } from 'next';

export default function ServerPage({
  user,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  if (!user) return <div>Please Sign In...</div>;

  return (
    <div className='mt-5 ml-5'>
      <p>Hello {user.email} from the Server</p>
      <h1>User:</h1>
      <div className='pl-2 flex flex-col gap-2'>
        <textarea
          className='text-black w-3/5 p-2 rounded-md text-sm'
          cols={30}
          rows={10}
          value={JSON.stringify(user, undefined, 2)}
          readOnly={true}
        />
      </div>
    </div>
  );
}

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const session = await getSession(ctx.req, ctx.res);
  return { props: { user: session?.user } };
};

Now we have a server-rendered page that uses getSession() from @monocloud/nextjs-auth to:

• Fetch the current session and display some user information (if the user is signed in)
• Otherwise, invite the user to sign in

Create the client rendered page

Now let's create a client-rendered page to display the user's session and profile data.

Just as with server-rendered pages, in a real application you'd protect individual pages by using protectPage() or protecting several pages and endpoints with monoCloudMiddleware() from @monocloud/nextjs-auth.

1. Inside your project's src/pages folder create a new folder named client.
2. Inside the folder create a new file index.tsx and add the code below:

import { useUser } from '@monocloud/nextjs-auth/client';

export default function ClientSide() {
  const { user, isAuthenticated, isLoading } = useUser();

  if (isLoading) return <div>Loading...</div>;
  if (!user) return <div>Something went wrong!</div>;
  if (!isAuthenticated) return <div>Please Sign In...</div>;

  return (
    <div className='mt-5 ml-5'>
      <p>Hello {user.email} from the Client</p>
      <h1>User:</h1>
      <div className='pl-2 flex flex-col gap-2'>
        <textarea
          className='text-black w-3/5 p-2 rounded-md text-sm'
          cols={30}
          rows={10}
          value={JSON.stringify(user, undefined, 2)}
          readOnly={true}
        />
      </div>
    </div>
  );
}

The client-rendered page uses the useUser() hook from the MonoCloud SDK to get the current user's profile. This page is rendered on the client side, and the user state returned by the hook is displayed on the page. If the user is not authenticated we invite them to sign-in.