The Sign in With OpenPage package (SIWOP) makes it easy to connect OpenPage accounts to your app. It can also act as a full drop in replacement of other forms of authentication. Using SIWOP enables your users to login once across all of your apps and bring their OpenPage avatars and profile data with them.

Sign in with OpenPage adheres to OAuth2.0 and OpenID Connect making it compatible with any platform that supports these standards. Custom implementations can be accomplished using the Connect APIs directly.

​
Quick Start

View our example NextJS project to easily get started with OP Connect.

​
Getting Started

1

Obtain and setup required config

  • SESSION_SECRET — a randomly generated, strong password of at least 32 characters
  • NEXT_PUBLIC_SIWOP_CLIENT_ID - your client id obtained in the OpenPage Portal
  • SIWOP_CLIENT_SECRET - your client secret obtained in the OpenPage Portal
  • NEXT_PUBLIC_SIWOP_REDIRECT_URI - your redirect_uri, this must match what is defined for your client in the OpenPage Portal

The NEXT_PUBLIC_SIWOP_CLIENT_ID and NEXT_PUBLIC_SIWOP_REDIRECT_URI must match what is defined for your app in the OpenPage Portal.

2

Install the required dependencies

$ npm i @tanstack/react-query @openpage/connect-siwop @openpage/connect-next-siwop
3

Configure the client and context

// utils/siwopClient.ts
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { configureClientSIWOP } from '@openpage/connect-next-siwop';

const queryClient = new QueryClient();

const siwopClient = configureClientSIWOP({
  apiRoutePrefix: '/api/siwop', // Your API route directory
  clientId: process.env.NEXT_PUBLIC_SIWOP_CLIENT_ID as string, // Your SIWOP client ID
  redirectUri: process.env.NEXT_PUBLIC_SIWOP_REDIRECT_URI as string, // Your Redirect URI
  scope: 'openid profile wallets.read twitter.read', // Your desired scopes
});

...
<QueryClientProvider client={queryClient}>
  <siwopClient.Provider>
      /* Your App */
  </siwopClient.Provider>
</QueryClientProvider>
4

Configure the required server API routes

Create a file inside your Next API folder api/siwop/[...route].ts.
// api/siwop/[...route].ts
import { configureServerSideSIWOP } from '@openpage/connect-next-siwop';

const siwopServer = configureServerSideSIWOP({
  config: {
    audience: 'yourdomain.com',
    clientId: process.env.NEXT_PUBLIC_SIWOP_CLIENT_ID,
    redirectUri: process.env.NEXT_PUBLIC_SIWOP_REDIRECT_URI,
    clientSecret: process.env.SIWOP_CLIENT_SECRET,
    scope: 'openid profile wallets.read twitter.read', // Matching scopes
  },
  session: {
    password: process.env.SESSION_SECRET,
    cookieOptions: {
      secure: process.env.NODE_ENV === 'production',
      sameSite: process.env.NODE_ENV === 'production' ? 'strict' : 'lax',
    },
  },
});

export default siwopServer.apiRouteHandler
5

SIWOP Button

Add the SIWOP button to your app.
import { SiwopButton, useSIWOP } from '@openpage/connect-siwop';

export default function App() {
  const { isSignedIn, idToken, data } = useSIWOP();

  return <SiwopButton showAvatar={true} showSignOutButton={isSignedIn} />
}