Skip to main content

Using the Next.js SDK with the pre-built React UI

If you would like to use the pre-built Scute UI with your Next.js app, you can do so using the @scute/ui-react package alongside @scute/nextjs and @scute/react. This package would expose the pre-built Auth and Profile components which you can use to easily integrate Scute to your current app.

Head over to the example project repo to clone and run this example project and check out the type docs for more scuteClient methods.

Install the SDK​

Install our React SDKs with your favorite package manager:

npm install @scute/nextjs @scute/react @scute/ui-react

Add your credentials to your environment variable handler:

NEXT_PUBLIC_SCUTE_APP_ID="YOUR_SCUTE_PROJECT_ID"
NEXT_PUBLIC_SCUTE_BASE_URL="YOUR_SCUTE_BASE_URL"
SCUTE_SECRET="YOUR_SCUTE_SECRET"

Add the Scute Next.js Handlers (App Router)​

In your project under src/app, create the path auth/[...scute]. Inside the newly created folder [...scute], create a file named route.js. This file will be the handler for the requests coming in from the pre-built React UI.

The directory structure should look like this:

src/
└─ app/
  └─ auth/
    └─ [...scute]/
      └─ route.js

To implement the handlers, add the code block below to the route.js file.

import { cookies, headers } from "next/headers";
import { ScuteHandler } from "@scute/nextjs";

const handler = ScuteHandler({ cookies, headers });

export { handler as GET, handler as POST };

Add the UI and the AuthContextProvider​

Using the @scute/ui-react and @scute/react packages, create an AuthProvider and the Auth component. Please refer to the Scute React UI docs for more information.

// src/components/authprovider.js

"use client";
import { useState } from "react";
import { createClientComponentClient } from "@scute/nextjs";
import { AuthContextProvider } from "@scute/react";

export default function AuthProvider({ children }) {
  const [scuteClient] = useState(() =>
    createClientComponentClient({
      appId: process.env.NEXT_PUBLIC_SCUTE_APP_ID,
      baseUrl: process.env.NEXT_PUBLIC_SCUTE_BASE_URL,
    })
  );

  return (
    <AuthContextProvider scuteClient={scuteClient}>
      {children}
    </AuthContextProvider>
  );
}
// src/components/auth.js

"use client";
import { useRouter } from "next/navigation";
import { useScuteClient } from "@scute/react";
import { Auth as ScuteAuth } from "@scute/ui-react";

export default function Auth() {
  const router = useRouter();
  const scuteClient = useScuteClient();

  return (
    <ScuteAuth
      scuteClient={scuteClient}
      policyURLs={{
        privacyPolicy: "https://example.com/privacy",
        termsOfService: "https://example.com/terms",
      }}
      // This callback will redirect authenticated users to their profile page
      onSignIn={() => {
        router.push("/profile");
      }}
      logoUrl="https://example.com/logo.svg"
    />
  );
}

Add the AuthProvider to the RootLayout​

Wrap the HTML body with the Auth provider inside your root layout file

// src/app/layout.js

import AuthProvider from "@/components/authprovider";
import "./globals.css";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <AuthProvider>
        <body>{children}</body>
      </AuthProvider>
    </html>
  );
}

Once the AuthProvider is in place, go ahead and add the Auth component to your homepage:

// src/app/page.js

import Auth from "@/components/auth";

export default function Home() {
  return (
    <main>
      <Auth />
    </main>
  );
}

Create a profile page with the Profile component​

Finally, build the profile page to handle the redirect from the home page on successful authentication,

// src/app/profile/page.js

"use client";
import { useScuteClient } from "@scute/react";
import { Profile as ScuteProfile } from "@scute/ui-react";

export default function Profile() {
  const scuteClient = useScuteClient();

  return <ScuteProfile scuteClient={scuteClient} />;
}

Congratulations! You now have a working Scute instance inside your Next.js app!

Add the Scute Next.js Handlers (Pages Router)​

To add the Scute handlers for Pages Router, create the path src/pages/auth and create a file named [...scute].js with the below content.

// src/pages/auth/[...scute].js

import { ScuteHandler } from "@scute/nextjs";

export default ScuteHandler;

To use Edge runtime, use the following code:

import { authenticateRequest } from "@scute/edge";
import { createPagesEdgeRuntimeClient } from "@scute/nextjs";
import { type NextRequest, NextResponse } from "next/server";

export const config = {
  runtime: "edge",
};

export default async function handler(request: NextRequest) {
  const scute = createPagesEdgeRuntimeClient({ request });

  const { data: user, error } = await authenticateRequest(request, scute);
  return NextResponse.json(user);
}