Notion UI
Documentation

Get Started

Learn how to authenticate and authorize users with Notion UI.

We provide a complete example to set up authentication by integrating Notion UI with BETTER-AUTH. See Notion Auth for full example.

Basic Usage

Setup Auth instance with BETTER-AUTH

Follow the tutorial on BETTER-AUTH to set up your auth instance.

Install Auth UI from Notion UI

pnpm add @notion-kit/auth-ui

Add an AuthProvider at the root of your application

// app/layout.tsx
import { AuthProvider } from "@/components/core/auth-ui"; 
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <AuthProvider
      /**
       * The base URL of the server.
       * You can use `https://notion-authn.vercel.app` for testing.
       */
      baseURL={...} 
    >
      <main>{children}</main>
    </AuthProvider> 
  );
}

Now, let's add a LoginForm to your root page

// app/page.tsx
import { LoginForm } from "@/components/core/auth-ui"; 
 
export default function Page() {
  return (
    <div className="flex h-screen w-screen flex-col items-center justify-center gap-10 bg-main">
      <h1 className="text-lg font-bold text-primary">Login Page</h1>
      <LoginForm
        mode="sign_in"
        callbackURL="/protected"
        className="w-80"
      />
    </div>
  );
}

You've created your login page.

You should see something like this:

Login Page

Use an organization email to easily collaborate with teammates

Forgot your password?
By continuing, you acknowledge that you understand and agree to the Terms & Conditions and Privacy Policy.
Don't have an account?

Previous

Creating a Cell Plugin

Next

Auth Provider

On this page