Getting Started
Next.js

Getting Started
Next.js

Next.js Quickstart

Before you can start integrating Ollio into your application, you need to create a Ollio account and set up a new application in the Ollio Dashboard. This guide will walk you through those steps.

Note

If you're migrating from another platform, see the migration guides to learn how to move your data to Ollio.

Note

If you're migrating from another platform, see the migration guides to learn how to move your data to Ollio.

Install @Ollio/nextjs

Ollio's Next.js SDK gives you access to prebuilt components, React hooks, and helpers to make user authentication easier.

Run the following command to install the SDK:

Ollio's Next.js SDK gives you access to prebuilt components, React hooks, and helpers to make user authentication easier.

Run the following command to install the SDK:

npm

yarn

pnpm

terminal

npm install @Ollio/nextjs

npm

yarn

pnpm

terminal

npm install @Ollio/nextjs

Set your Ollio API keys

In the Ollio Dashboard, navigate to the API keys⁠ page.

In the Ollio Dashboard, navigate to the API keys⁠ page.
In the Quick Copy section, copy your Clerk Publishable and Secret Keys.
Paste your keys into your .env.local file.

The final result should resemble the following:

In the Ollio Dashboard, navigate to the API keys⁠ page.

In the Ollio Dashboard, navigate to the API keys⁠ page.
In the Quick Copy section, copy your Clerk Publishable and Secret Keys.
Paste your keys into your .env.local file.

The final result should resemble the following:

.env.local

NEXT_PUBLIC_OLLIO_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
OLLIO_SECRET_KEY=YOUR_SECRET_KEY

.env.local

NEXT_PUBLIC_OLLIO_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
OLLIO_SECRET_KEY=YOUR_SECRET_KEY

Adding ollioMiddleware() to Your Application

ollioMiddleware() provides seamless access to user authentication states throughout your application, regardless of the route or page. Additionally, it enables you to secure specific routes from unauthenticated users. To integrate ollioMiddleware() into your app, follow these steps:

Create a middleware.ts file:
- If your app uses a /src directory, place middleware.ts in the /src directory.
- Otherwise, create middleware.ts in the root directory, alongside your .env.local file.
Export the ollioMiddleware() helper in your middleware.ts file.

Create a middleware.ts file:
- If your app uses a /src directory, place middleware.ts in the /src directory.
- Otherwise, create middleware.ts in the root directory, alongside your .env.local file.
Export the ollioMiddleware() helper in your middleware.ts file.

middleware.ts

import { ollioMiddleware } from '@ollio/nextjs/server'

export default ollioMiddleware()

export const config = {
  matcher: [
    // Exclude Next.js internals and static files, unless referenced in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Ensure it runs for API routes
    '/(api|trpc)(.*)',
  ],
}

middleware.ts

import { ollioMiddleware } from '@ollio/nextjs/server'

export default ollioMiddleware()

export const config = {
  matcher: [
    // Exclude Next.js internals and static files, unless referenced in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Ensure it runs for API routes
    '/(api|trpc)(.*)',
  ],
}

By default, ollioMiddleware() does not protect any routes. All routes are accessible to the public, and you need to explicitly enable protection for specific routes. Refer to the ollioMiddleware() documentation for details on requiring authentication for specific routes.

By default, ollioMiddleware() does not protect any routes. All routes are accessible to the public, and you need to explicitly enable protection for specific routes. Refer to the ollioMiddleware() documentation for details on requiring authentication for specific routes.

Add <OllioProvider> and Ollio Components to Your App

The <OllioProvider> component supplies session and user context to Ollio's hooks and components. It is recommended to wrap your entire application at the entry point with <OllioProvider> to make authentication functionality globally available. Refer to the documentation for additional configuration options.

You can control the visibility of content for signed-in and signed-out users using Ollio's prebuilt control components. Create a header with the following components:

<SignedIn>: Displays its children only when the user is signed in.
<SignedOut>: Displays its children only when the user is signed out.
<UserButton />: Displays the avatar of the signed-in user. Clicking it opens a dropdown menu for account management options.
<SignInButton />: An unstyled component that links to the sign-in page. In this example, since no props or environment variables are specified for the sign-in URL, the button redirects to the Account Portal sign-in page.

Choose your preferred routing setup to integrate this across your app:

You can control the visibility of content for signed-in and signed-out users using Ollio's prebuilt control components. Create a header with the following components:

<SignedIn>: Displays its children only when the user is signed in.
<SignedOut>: Displays its children only when the user is signed out.
<UserButton />: Displays the avatar of the signed-in user. Clicking it opens a dropdown menu for account management options.
<SignInButton />: An unstyled component that links to the sign-in page. In this example, since no props or environment variables are specified for the sign-in URL, the button redirects to the Account Portal sign-in page.

Choose your preferred routing setup to integrate this across your app:

App router

Page router

app/layout.tsx

import { OllioProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@ollio/nextjs'
import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <OllioProvider>
      <html lang="en">
        <body>
          <header>
            <SignedOut>
              <SignInButton />
            </SignedOut>
            <SignedIn>
              <UserButton />
            </SignedIn>
          </header>
          <main>{children}</main>
        </body>
      </html>
    </OllioProvider>
  )
}

App router

Page router

app/layout.tsx

import { OllioProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@ollio/nextjs'
import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <OllioProvider>
      <html lang="en">
        <body>
          <header>
            <SignedOut>
              <SignInButton />
            </SignedOut>
            <SignedIn>
              <UserButton />
            </SignedIn>
          </header>
          <main>{children}</main>
        </body>
      </html>
    </OllioProvider>
  )
}

Create your first user

Run your project with the following command:

npm

yarn

pnpm

terminal

npm run dev

npm

yarn

pnpm

terminal

npm run dev

Open your app's homepage at http://localhost:3000 and sign up to create your initial user account.

What did you think of this content?

It was helpful

It was not helpful

I have feedback

What did you think of this content?

Helpful

Not helpful

Feedback

Set up your Ollio account

Getting Started with Remix

Set up your Ollio account

Getting Started with Remix

Last updated on

Dec

2024

Last updated on

Dec

2024