OASIS Avatar SSO SDK - Next.js

Complete Next.js integration for OASIS Avatar Single Sign-On with App Router and Pages Router support.

Installation

npm install @oasis/avatar-sso-nextjs

Quick Start (App Router)

1. Create Provider Component

// app/providers.tsx
'use client';

import { OasisSSOProvider } from '@oasis/avatar-sso-nextjs';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <OasisSSOProvider
      apiUrl={process.env.NEXT_PUBLIC_OASIS_API_URL || 'https://api.oasis.network'}
      provider="Auto"
    >
      {children}
    </OasisSSOProvider>
  );
}

2. Wrap Root Layout

// 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>
  );
}

3. Use in Components

// app/login/page.tsx
'use client';

import { useState } from 'react';
import { useOasisSSO } from '@oasis/avatar-sso-nextjs';
import { useRouter } from 'next/navigation';

export default function LoginPage() {
  const { login, isAuthenticated, user } = useOasisSSO();
  const router = useRouter();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [provider, setProvider] = useState('Auto');

  const handleLogin = async () => {
    try {
      await login(username, password, provider);
      router.push('/dashboard');
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

  if (isAuthenticated) {
    return (
      <div>
        <h2>Welcome, {user?.username}!</h2>
      </div>
    );
  }

  return (
    <div>
      <h1>Login to OASIS</h1>
      <input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <select value={provider} onChange={(e) => setProvider(e.target.value)}>
        <option value="Auto">Auto</option>
        <option value="MongoDBOASIS">MongoDB</option>
        <option value="EthereumOASIS">Ethereum</option>
      </select>
      <button onClick={handleLogin}>Beam In</button>
    </div>
  );
}

4. Protected Routes with Middleware

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('oasis_token')?.value;
  
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*']
};

Server-Side Authentication

API Route Handler

// app/api/auth/login/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const { username, password, provider } = await request.json();
  
  const response = await fetch('https://api.oasis.network/avatar/authenticate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username, password, provider })
  });
  
  const data = await response.json();
  
  if (data.success && data.token) {
    const res = NextResponse.json(data);
    res.cookies.set('oasis_token', data.token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'strict',
      maxAge: 60 * 60 * 24 * 7 // 7 days
    });
    return res;
  }
  
  return NextResponse.json(data, { status: 401 });
}

Server Component with Auth

// app/dashboard/page.tsx
import { cookies } from 'next/headers';
import { redirect } from 'next/navigation';

async function getUser() {
  const token = cookies().get('oasis_token')?.value;
  
  if (!token) {
    redirect('/login');
  }
  
  const response = await fetch('https://api.oasis.network/avatar/profile', {
    headers: { Authorization: `Bearer ${token}` }
  });
  
  return response.json();
}

export default async function DashboardPage() {
  const user = await getUser();
  
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Welcome, {user.username}!</p>
    </div>
  );
}

Pages Router Support

// pages/_app.tsx
import { OasisSSOProvider } from '@oasis/avatar-sso-nextjs';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <OasisSSOProvider apiUrl="https://api.oasis.network">
      <Component {...pageProps} />
    </OasisSSOProvider>
  );
}

// pages/login.tsx
import { useOasisSSO } from '@oasis/avatar-sso-nextjs';

export default function Login() {
  const { login } = useOasisSSO();
  // ... same as App Router example
}

Features

✨ App Router & Pages Router - Full support for both 🔐 Server-Side Auth - Secure cookie-based authentication 🚀 TypeScript - Complete type safety 🎯 Middleware Support - Easy route protection 📱 SSR & SSG - Server-side rendering compatible

API Reference

Client Components

import { useOasisSSO } from '@oasis/avatar-sso-nextjs';

const {
  user,
  isAuthenticated,
  isLoading,
  login,
  logout,
  refreshToken
} = useOasisSSO();

Server Actions (App Router)

// app/actions/auth.ts
'use server';

import { cookies } from 'next/headers';

export async function serverLogin(username: string, password: string) {
  // Server-side authentication
  const response = await fetch('https://api.oasis.network/avatar/authenticate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username, password, provider: 'Auto' })
  });
  
  const data = await response.json();
  
  if (data.success && data.token) {
    cookies().set('oasis_token', data.token, {
      httpOnly: true,
      secure: true,
      sameSite: 'strict'
    });
  }
  
  return data;
}

Environment Variables

NEXT_PUBLIC_OASIS_API_URL=https://api.oasis.network
OASIS_API_SECRET=your-secret-key

License

PreviousOASIS Avatar SSO SDK - Angular NextOASIS Avatar SSO SDK Pack

Last updated 2 months ago

Good afternoon

hashtagInstallation

hashtagQuick Start (App Router)

hashtag1. Create Provider Component

hashtag2. Wrap Root Layout

hashtag3. Use in Components

hashtag4. Protected Routes with Middleware

hashtagServer-Side Authentication

hashtagAPI Route Handler

hashtagServer Component with Auth

hashtagPages Router Support

hashtagFeatures

hashtagAPI Reference

hashtagClient Components

hashtagServer Actions (App Router)

hashtagEnvironment Variables

hashtagLicense