Pardivelle OAuth SDK

Universal authentication SDK for React, Next.js, React Native and Expo

Universal

Features

Universal

Works on Web and Mobile

Secure

OAuth 2.0 best practices

Easy to use

Simple and intuitive API

TypeScript

Fully typed

Auto-refresh

Automatic token management

Persistence

Sessions that persist

Installation

Web Apps (React, Next.js)

npm install @pardivelle/oauth-sdk

Mobile Apps (React Native, Expo)

npm install @pardivelle/oauth-sdk expo-web-browser @react-native-async-storage/async-storage

Quick Start

Get started in minutes

The SDK provides a pre-built modal component and authentication hook that handles the entire OAuth flow including popup management, token exchange, and session persistence.

import { PardiveIleLoginModal, usePardiveIleOAuth } from '@pardivelle/oauth-sdk'

function App() {
  const { isAuthenticated, user, handleSuccess, handleError, logout } = usePardiveIleOAuth({
    clientId: 'your_client_id',
    redirectUri: 'https://yourapp.com/auth/callback',
    scopes: ['profile', 'email', 'experiences']
  })

  if (isAuthenticated && user) {
    return (
      <div>
        <h1>Welcome, {user.name}!</h1>
        <button onClick={logout}>Logout</button>
      </div>
    )
  }

  return (
    <PardiveIleLoginModal
      clientId="your_client_id"
      redirectUri="https://yourapp.com/auth/callback"
      scopes={['profile', 'email']}
      onSuccess={handleSuccess}
      onError={handleError}
    />
  )
}

Required Setup

You need to create two additional files for the OAuth flow to work:

  • Callback page: app/auth/callback/page.tsx - Handles the OAuth redirect
  • Exchange endpoint: app/api/auth/pardivelle/exchange/route.ts - Exchanges code for tokens

API Reference

usePardiveIleOAuth

Main authentication hook

Returns

isAuthenticatedboolean - User authentication status
userPardiveIleUser | null - User profile data
tokensPardiveIleTokens | null - OAuth tokens
isLoadingboolean - Loading state
clientPardiveIleOAuthClient - API client
logout() => Promise<void> - Logout function
handleSuccess(user, tokens) => void - Success handler
handleError(error) => void - Error handler

<PardiveIleLoginModal />

Pre-built login modal component

Props

clientId
Required

Your OAuth client ID

redirectUri
Required

Callback URL (web: https://..., mobile: yourapp://...)

scopes
Optional

Array of permission scopes (default: ['profile', 'email'])

onSuccess
Required

Callback when authentication succeeds

onError
Required

Callback when authentication fails

buttonText
Optional

Custom button text

buttonClassName
Optional (Web only)

Custom CSS class for styling

OAuth Scopes

Available permission scopes

profile

Basic user profile information

Required
email

User email address

Optional
experiences

Access to bookings and favorites

Optional
destinations

Spotlight destinations data

Optional

Security Best Practices

Never expose client_secret in frontend

Always keep your client_secret on the server. Use the exchange endpoint pattern shown above.

Always use HTTPS in production

OAuth tokens should never be transmitted over insecure connections.

Implement rate limiting

Protect your exchange endpoint from abuse with rate limiting.

Store tokens securely

The SDK uses localStorage (web) and AsyncStorage (mobile) by default. For sensitive apps, consider using secure storage solutions.