Skip to main content

Getting Started

Set up authentication in your React application.

Installation​

npm install @groo.dev/auth-react

Setup AuthProvider​

Wrap your app with AuthProvider:

import { AuthProvider } from '@groo.dev/auth-react'

function App() {
  return (
    <AuthProvider
      baseUrl="http://localhost:8787"
      clientId="your-client-id"
      redirectUri="http://localhost:3000"
    >
      <YourApp />
    </AuthProvider>
  )
}

Configuration Options​

PropTypeRequiredDescription
baseUrlstringYesYour API's base URL (not accounts service)
clientIdstringYesYour application's client ID
redirectUristringYesWhere to redirect after auth
Important

The baseUrl should point to your own API, not the accounts service. The AuthProvider calls GET /v1/__auth/me on your API.

Next.js Setup​

For Next.js, create a client component for the provider:

// app/providers.tsx
'use client'

import { AuthProvider } from '@groo.dev/auth-react'

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <AuthProvider
      baseUrl={process.env.NEXT_PUBLIC_BASE_URL!}
      clientId={process.env.NEXT_PUBLIC_CLIENT_ID!}
      redirectUri={process.env.NEXT_PUBLIC_REDIRECT_URI!}
    >
      {children}
    </AuthProvider>
  )
}

Then wrap your app in layout.tsx:

// app/layout.tsx
import { Providers } from './providers'

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

Environment Variables​

# .env
NEXT_PUBLIC_BASE_URL=http://localhost:8787
NEXT_PUBLIC_CLIENT_ID=your-client-id
NEXT_PUBLIC_REDIRECT_URI=http://localhost:3000

How It Works​

The AuthProvider:

  1. Calls GET /v1/__auth/me on your API
  2. Your API validates the session cookie and returns the user
  3. Provides authentication state to all child components
  4. Generates login/logout URLs with correct parameters