Ollio

Docs

V1.0

Home

Getting started

Overview

Set up Ollio

Fullstack

Next.js

New

Remix

Frontend

Javascript

iOS

beta

Guides

Overview

Add custom onboarding to your authentication flow

Set up a waitlist

AUTHENTICATION

Sign-up & sign-in

Overview

Sign-up and sign-in options

Session options

Restrictions

New

Users

Overview

Metadata

Invitations

Search documentation…

Purchase template · $99

Search documentation…

Purchase template · $99

Ollio

Docs

1

Install @ollio/nextjs

1

Install @ollio/nextjs

Ollio's Next.js SDK provides prebuilt components, React hooks, and helpers to simplify user authentication.

Run one of the following commands to install the SDK:

Ollio's Next.js SDK provides prebuilt components, React hooks, and helpers to simplify user authentication.

Run one of the following commands to install the SDK:

npm

yarn

pnpm

terminal

npm install @ollio/nextjs

npm

yarn

pnpm

terminal

npm install @ollio/nextjs

2

Set Your Ollio API Keys

2

Set Your Ollio API Keys

In the Ollio Dashboard, go to the API Keys page.

  • Copy your Publishable and Secret Keys from the Quick Copy section.

  • Add these keys to your .env.local file.

The .env.local file should look like this:

In the Ollio Dashboard, go to the API Keys page.

  • Copy your Publishable and Secret Keys from the Quick Copy section.

  • Add these keys to your .env.local file.

The .env.local file should look like this:

.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

3

Enable Waitlist Mode

3

Enable Waitlist Mode

To enable Waitlist mode:

  • In the Ollio Dashboard, go to the Restrictions page.

  • Under Sign-Up Modes, enable Waitlist.

To manage users on the waitlist:

  • In the Ollio Dashboard, navigate to the Waitlist page.

  • Select the menu icon (...) next to a user.

  • Choose Invite to grant access or Deny to restrict access.

To enable Waitlist mode:

  • In the Ollio Dashboard, go to the Restrictions page.

  • Under Sign-Up Modes, enable Waitlist.

To manage users on the waitlist:

  • In the Ollio Dashboard, navigate to the Waitlist page.

  • Select the menu icon (...) next to a user.

  • Choose Invite to grant access or Deny to restrict access.

4

Add the <Waitlist /> Component

4

Add the <Waitlist /> Component

The <Waitlist /> component renders a form for users to join your app's waitlist.

Below is an example of a basic implementation hosted on the / route (homepage).

The <Waitlist /> component renders a form for users to join your app's waitlist.

Below is an example of a basic implementation hosted on the / route (homepage).

app/page.tsx

import { Waitlist } from '@ollio/nextjs'

export default function Page() {
  return <Waitlist />
}

app/page.tsx

import { Waitlist } from '@ollio/nextjs'

export default function Page() {
  return <Waitlist />
}

5

Add <OllioProvider> to Your App

5

Add <OllioProvider> to Your App

The <OllioProvider> component supplies session and user context to Ollio hooks and components. It’s recommended to wrap your entire app at the entry point with <OllioProvider> for global authentication accessibility.

To use the <Waitlist /> component, include the waitlistUrl prop, pointing to your waitlist page.

The <OllioProvider> component supplies session and user context to Ollio hooks and components. It’s recommended to wrap your entire app at the entry point with <OllioProvider> for global authentication accessibility.

To use the <Waitlist /> component, include the waitlistUrl prop, pointing to your waitlist page.

app/layout.tsx

import { OllioProvider } from '@ollio/nextjs'
import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <OllioProvider waitlistUrl="/">
      <html lang="en">
        <body>{children}</body>
      </html>
    </OllioProvider>
  )
}

app/layout.tsx

import { OllioProvider } from '@ollio/nextjs'
import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <OllioProvider waitlistUrl="/">
      <html lang="en">
        <body>{children}</body>
      </html>
    </OllioProvider>
  )
}

6

Add Sign-In Functionality

6

Add Sign-In Functionality

To enable user sign-in after approval from the waitlist:

To enable user sign-in after approval from the waitlist:

Add ollioMiddleware() to Your App

Add ollioMiddleware() to Your App

ollioMiddleware() provides user authentication state across your app and helps protect routes from unauthenticated users.

  • Create a middleware.ts file in your app:

    • Place it in the /src directory if using one, or the root directory otherwise.

  • Export the ollioMiddleware() helper:

ollioMiddleware() provides user authentication state across your app and helps protect routes from unauthenticated users.

  • Create a middleware.ts file in your app:

    • Place it in the /src directory if using one, or the root directory otherwise.

  • Export the ollioMiddleware() helper:

middleware.ts

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

export default ollioMiddleware()

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

middleware.ts

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

export default ollioMiddleware()

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

By default, ollioMiddleware() does not protect any routes. You can configure specific routes for authentication in the reference guide.

By default, ollioMiddleware() does not protect any routes. You can configure specific routes for authentication in the reference guide.

Add a Sign-In Page

Add a Sign-In Page

Below is an example of rendering the <SignIn /> component:

Below is an example of rendering the <SignIn /> component:

app/sign-in/[[...sign-in]]/page.tsx

import { SignIn } from '@ollio/nextjs'

export default function Page() {
  return <SignIn />
}

app/sign-in/[[...sign-in]]/page.tsx

import { SignIn } from '@ollio/nextjs'

export default function Page() {
  return <SignIn />
}

Update your environment variables to reference your custom sign-in page:

Update your environment variables to reference your custom sign-in page:

.env.local

NEXT_PUBLIC_OLLIO_SIGN_IN_URL="/sign-in"

.env.local

NEXT_PUBLIC_OLLIO_SIGN_IN_URL="/sign-in"

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

Previous

Add onboarding flow

Next

Sign-Up & Sign-In Overview

Previous

Add onboarding flow

Next

Sign-Up & Sign-In Overview

Last updated on

Dec

4,

2024

Last updated on

Dec

4,

2024

ON THIS PAGE

Install @ollio/nextjs

Set Your Ollio API Keys

Enable Waitlist Mode

Add the <Waitlist /> Component

Add <OllioProvider> to Your App

Add Sign-In Functionality

Add ollioMiddleware() to Your App

Add a Sign-In Page

BACK TO TOP

Ollio

Docs

Ollio

Docs