oneauth-nextjs

v1.0.7

Published

5 months ago

Next.js integration for OneAuth SDK with middleware and SSR support

Downloads

0High
0Medium
0Low

ashrawan

authentication nextjs middleware ssr oauth

OneAuth Next.js SDK

Add secure authentication to your Next.js app in minutes with just a few lines of code.

Quick Start

Get authentication working in your Next.js app with 3 simple steps:

1. Install

npm install oneauth-nextjs

2. Wrap your app

// app/layout.tsx
import { AuthProvider } from 'oneauth-nextjs'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AuthProvider config={{ 
          apiUrl: 'http://localhost:8080',
          authMode: 'password',
          providers: ['google', 'github']
        }}>
          {children}
        </AuthProvider>
      </body>
    </html>
  )
}

3. Add authentication to any page

// app/page.tsx
'use client'
import { SignedIn, SignedOut, SignInButton, UserButton } from 'oneauth-nextjs'

export default function Home() {
  return (
    <>
      <header style={{ display: 'flex', justifyContent: 'space-between', padding: '1rem' }}>
        <h1>My App</h1>
        <SignedOut>
          <SignInButton />  
        </SignedOut>
        <SignedIn>
          <UserButton />
        </SignedIn>
      </header>
      
      <main style={{ padding: '2rem', textAlign: 'center' }}>
        <SignedOut>
          <h2>Welcome! Please sign in to continue</h2>
        </SignedOut>
        
        <SignedIn>
          <h2>🎉 You're signed in!</h2>
        </SignedIn>
      </main>
    </>
  )
}

That's it! Your Next.js app now has:

✅ Google & GitHub OAuth
✅ Email/password authentication
✅ User sessions
✅ Sign in/out components
✅ Automatic user management

Features

🚀 Next.js 13+ App Router - Full support for the latest Next.js App Router
📄 Pages Router Compatible - Works with traditional Pages Router setup
🔒 Secure by Default - Built-in security best practices
🎨 Ready-to-use Components - Drop-in authentication UI
🌐 OAuth Providers - GitHub, Google, and more
⚡ TypeScript Ready - Full TypeScript support

Pages Router Setup

For Next.js Pages Router, wrap your app in _app.tsx:

// pages/_app.tsx
import { AuthProvider } from 'oneauth-nextjs'

export default function App({ Component, pageProps }) {
  return (
    <AuthProvider config={{ 
      apiUrl: 'http://localhost:8080',
      authMode: 'password',
      providers: ['google', 'github']
    }}>
      <Component {...pageProps} />
    </AuthProvider>
  )
}

Then use the same components in any page:

// pages/index.tsx
import { SignedIn, SignedOut, SignInButton, UserButton } from 'oneauth-nextjs'

export default function Home() {
  return (
    <div>
      <SignedOut>
        <SignInButton />
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
    </div>
  )
}

Get User Information

Access user data anywhere with the useAuth hook:

import { useAuth } from 'oneauth-nextjs'

function MyComponent() {
  const { user, isAuthenticated } = useAuth()

  if (!isAuthenticated) {
    return <div>Please sign in</div>
  }

  return (
    <div>
      <h2>Welcome {user.fullName}!</h2>
      <p>Email: {user.email}</p>
      <p>Provider: {user.registeredProviderName}</p>
    </div>
  )
}

Available Components

| Component | Description | |-----------|-------------| | <SignInButton /> | Shows sign in button when user is signed out | | <UserButton /> | Shows user avatar and menu when signed in | | <SignedIn> | Only shows children when user is signed in | | <SignedOut> | Only shows children when user is signed out | | <AuthModal /> | Full authentication modal |

Configuration Options

<AuthProvider config={{
  apiUrl: 'http://localhost:8080',          // Your OneAuth server
  authMode: 'password',                     // 'password' | 'passwordless' | 'oauth'
  providers: ['google', 'github'],         // OAuth providers
  enableVerificationInput: false,           // Require email verification
  alwaysFetchUser: false,                   // Always fetch user on load
  advanced: {
    debug: false                            // Enable debug mode
  }
}}>

Custom Authentication Modal

Use AuthModal for a custom sign-in experience:

import { AuthModal, useAuth } from 'oneauth-nextjs'

function MyApp() {
  const { isModalOpen, hideModal } = useAuth()
  
  return (
    <>
      <SignInButton />
      
      <AuthModal 
        isOpen={isModalOpen} 
        onClose={hideModal}
        onSuccess={hideModal}
        appName="My App"
      />
    </>
  )
}

Environment Variables

Set up your environment variables:

# .env.local
ONE_AUTH_SERVER_URL=http://localhost:8080

Then use in your config:

<AuthProvider config={{ 
  apiUrl: process.env.ONE_AUTH_SERVER_URL || 'http://localhost:8080',
  // ... other config
}}>

TypeScript Support

Full TypeScript support out of the box:

import { useAuth, User } from 'oneauth-nextjs'

function UserProfile() {
  const { user, isAuthenticated }: {
    user: User | null
    isAuthenticated: boolean
  } = useAuth()

  return (
    <div>
      {user?.fullName && <h2>{user.fullName}</h2>}
      <p>{user?.email}</p>
    </div>
  )
}

Examples

Check out complete examples:

Need Help?

Made with ❤️ by the OneAuth team