Add Login to Next.js (Pages Router)

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

NEXT_PUBLIC_OPTARE_DOMAIN=https://id.optare.one
NEXT_PUBLIC_OPTARE_CLIENT_ID=your_client_id
OPTARE_CLIENT_SECRET=your_client_secret

import { NextApiHandler } from 'next';
 
const handler: NextApiHandler = async (req, res) => {
  const action = req.query.optare?.[0];
 
  if (action === 'login') {
    const params = new URLSearchParams({
      client_id: process.env.NEXT_PUBLIC_OPTARE_CLIENT_ID!,
      redirect_uri: `${process.env.NEXT_PUBLIC_APP_URL}/api/auth/callback`,
      response_type: 'code',
      scope: 'openid profile email organization',
    });
    res.redirect(`${process.env.NEXT_PUBLIC_OPTARE_DOMAIN}/oauth/authorize?${params}`);
  }
  
  // Add callback and logout handlers...
};
 
export default handler;

import { OptareProvider } from '@optare/optareid-react';
import type { AppProps } from 'next/app';
 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <OptareProvider
      domain={process.env.NEXT_PUBLIC_OPTARE_DOMAIN!}
      clientId={process.env.NEXT_PUBLIC_OPTARE_CLIENT_ID!}
    >
      <Component {...pageProps} />
    </OptareProvider>
  );
}

import { useOptare } from '@optare/optareid-react';
 
export default function Home() {
  const { user, isAuthenticated, login, logout } = useOptare();
 
  return (
    <div>
      {isAuthenticated ? (
        <>
          <p>Welcome, {user?.email}</p>
          <button onClick={logout}>Log Out</button>
        </>
      ) : (
        <button onClick={login}>Log In</button>
      )}
    </div>
  );
}

import { GetServerSideProps } from 'next';
 
export const getServerSideProps: GetServerSideProps = async (context) => {
  const token = context.req.cookies['optare-session'];
  
  if (!token) {
    return {
      redirect: { destination: '/api/auth/login', permanent: false }
    };
  }
 
  return { props: { user: /* decoded token */ } };
};