Getting Started
Remix

Getting Started
Remix

Getting Started with Remix

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 working with Remix in SPA mode, refer to the dedicated Remix SPA mode guide.

Note

If you're working with Remix in SPA mode, refer to the dedicated Remix SPA mode guide.

Install @ollio/remix

The Ollio Remix SDK provides prebuilt components, hooks, and helpers to simplify user authentication.

Run the following command to install the SDK:

The Ollio Remix SDK provides prebuilt components, hooks, and helpers to simplify user authentication.

Run the following command to install the SDK:

npm

yarn

pnpm

terminal

npm install @Ollio/remix

npm

yarn

pnpm

terminal

npm install @Ollio/remix

Configure your Ollio API keys

In the Ollio Dashboard, go to the API keys section.
Under Quick Copy, copy your Ollio Publishable Key and Secret Key.
Add these keys to your .env.local file.

Your configuration should look similar to this:

In the Ollio Dashboard, go to the API keys section.
Under Quick Copy, copy your Ollio Publishable Key and Secret Key.
Add these keys to your .env.local file.

Your configuration should look similar to this:

.env.local

OLLIO_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
OLLIO_SECRET_KEY=YOUR_SECRET_KEY

.env.local

OLLIO_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
OLLIO_SECRET_KEY=YOUR_SECRET_KEY

Configure rootAuthLoader

To set up Ollio in your Remix application, you need to update your root loader. This ensures authentication state is accessible across all Remix routes.

Modify your root.tsx file with the following code:

To set up Ollio in your Remix application, you need to update your root loader. This ensures authentication state is accessible across all Remix routes.

Modify your root.tsx file with the following code:

app/root.tsx

import type { MetaFunction, LoaderFunction } from '@remix-run/node'
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'

// Import rootAuthLoader
import { rootAuthLoader } from '@ollio/remix/ssr.server'

export const meta: MetaFunction = () => [
  {
    charset: 'utf-8',
    title: 'New Remix App',
    viewport: 'width=device-width,initial-scale=1',
  },
]

// Export as the root route loader
export const loader: LoaderFunction = (args) => rootAuthLoader(args)

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

export default function App() {
  return <Outlet />
}

app/root.tsx

import type { MetaFunction, LoaderFunction } from '@remix-run/node'
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'

// Import rootAuthLoader
import { rootAuthLoader } from '@ollio/remix/ssr.server'

export const meta: MetaFunction = () => [
  {
    charset: 'utf-8',
    title: 'New Remix App',
    viewport: 'width=device-width,initial-scale=1',
  },
]

// Export as the root route loader
export const loader: LoaderFunction = (args) => rootAuthLoader(args)

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

export default function App() {
  return <Outlet />
}

If you need to load in additional data, you can pass your loader directly to the rootAuthLoader.

app/root.tsx

// Your imports

export const loader: LoaderFunction = (args) => {
  return rootAuthLoader(args, ({ request }) => {
    const { sessionId, userId, getToken } = request.auth
    // Add logic to fetch data
    return { yourData: 'here' }
  })
}

// Your additional app code

app/root.tsx

// Your imports

export const loader: LoaderFunction = (args) => {
  return rootAuthLoader(args, ({ request }) => {
    const { sessionId, userId, getToken } = request.auth
    // Add logic to fetch data
    return { yourData: 'here' }
  })
}

// Your additional app code

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

Next.js Quickstart

Getting Started with JavaScript

Next.js Quickstart

Getting Started with JavaScript

Last updated on

Dec

2024

Last updated on

Dec

2024