Add Login to Your React Application

This quickstart shows how to add authentication to a React app using @optare/optareid-react.

Prerequisites

Node.js 18+ installed
An Optare account (sign up free (opens in a new tab))
A React application (or we'll create one)

1. Create a React App (Optional)

If you don't have an existing React app, create one with Vite:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

2. Install the SDK

npm install @optare/optareid-react @optare/optareid-js

3. Get Your Client ID

Log in to Optare Console (opens in a new tab)
Go to Applications → OAuth Clients
Click Create Client
Set:
- Name: My React App
- Redirect URI: http://localhost:5173 (for development)
- Application Type: Single Page Application
Copy the Client ID

4. Configure Environment Variables

Create a .env file in your project root:

VITE_OPTARE_DOMAIN=https://id.optare.one
VITE_OPTARE_CLIENT_ID=your_client_id_here

5. Add the Provider

Wrap your app with OptareProvider in src/main.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { OptareProvider } from '@optare/optareid-react';
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <OptareProvider
      domain={import.meta.env.VITE_OPTARE_DOMAIN}
      clientId={import.meta.env.VITE_OPTARE_CLIENT_ID}
      redirectUri={window.location.origin}
    >
      <App />
    </OptareProvider>
  </React.StrictMode>
);

6. Create Login/Logout Buttons

Create src/AuthButtons.tsx:

import { useOptare } from '@optare/optareid-react';
 
export function LoginButton() {
  const { login } = useOptare();
  return <button onClick={login}>Log In</button>;
}
 
export function LogoutButton() {
  const { logout } = useOptare();
  return <button onClick={logout}>Log Out</button>;
}

7. Display User Profile

Update your src/App.tsx:

import { useOptare } from '@optare/optareid-react';
import { LoginButton, LogoutButton } from './AuthButtons';
 
function App() {
  const { user, isAuthenticated, isLoading } = useOptare();
 
  if (isLoading) {
    return <div>Loading...</div>;
  }
 
  return (
    <div>
      <h1>My App</h1>
      
      {isAuthenticated ? (
        <div>
          <p>Welcome, {user?.name || user?.email}!</p>
          <img src={user?.avatarUrl} alt="Avatar" width={50} />
          <LogoutButton />
        </div>
      ) : (
        <LoginButton />
      )}
    </div>
  );
}
 
export default App;

8. Run Your App

npm run dev

Open http://localhost:5173 (opens in a new tab) and click Log In!

Next Steps

Protect Routes - Require auth for certain pages
Access Tokens - Use tokens for API calls
Organizations - Multi-tenant setup

Troubleshooting

"Invalid redirect_uri"

Make sure the redirect URI in your OAuth client settings exactly matches http://localhost:5173 (no trailing slash).

"CORS Error"

Add your domain to the allowed origins in your OAuth client settings.

Full Example

See the complete code on GitHub (opens in a new tab).

Overview Next.js (App Router)