Getting Started

Get Signify iD integrated into your React or Next.js application in under 5 minutes.

Prerequisites

Before you begin, make sure you have:

Node.js 18.x or higher
A Signify iD account (sign up at the dashboard)
Your organization's API URL and Login URL

Installation

Install the Signify iD client SDK using your preferred package manager:

npm

npm install signifyid/client

yarn

yarn add signifyid/client

pnpm

pnpm add signifyid/client

Environment Variables

Configure your environment with the following variables:

.env.local

# .env.local
NEXT_PUBLIC_SIGNIFY_API_URL=https://api.signifyid.com
NEXT_PUBLIC_SIGNIFY_LOGIN_URL=https://signifyid.com/client/login

Keep URLs correct

Make sure your API URL and Login URL are correct for your environment. Use different values for development and production.

Step 1: Wrap Your App with SignifyProvider

Wrap your application with the SignifyProvider to enable authentication:

app/layout.tsx

1 // app/layout.tsx (Next.js App Router)
2 import { SignifyProvider } from "signifyid/client";
3 
4 export default function RootLayout({
5   children,
6 }: {
7   children: React.ReactNode;
8 }) {
9   return (
10     <html lang="en">
11       <body>
12         <SignifyProvider
13           config={{
14             apiUrl: process.env.NEXT_PUBLIC_SIGNIFY_API_URL!,
15             loginUrl: process.env.NEXT_PUBLIC_SIGNIFY_LOGIN_URL!,
16           }}
17         >
18           {children}
19         </SignifyProvider>
20       </body>
21     </html>
22   );
23 }

Step 2: Protect Routes That Require Authentication

Use the ProtectedRoute component to secure pages:

app/dashboard/page.tsx

1 // app/dashboard/page.tsx
2 import { ProtectedRoute } from "signifyid/client";
3 import Dashboard from "./Dashboard";
4 
5 export default function DashboardPage() {
6   return (
7     <ProtectedRoute>
8       <Dashboard />
9     </ProtectedRoute>
10   );
11 }

Step 3: Use the Auth Hook in Your Components

Access authentication state and methods with the useSignifyAuth hook:

components/Navbar.tsx

1 // components/Navbar.tsx
2 "use client";
3 
4 import { useSignifyAuth } from "signifyid/client";
5 
6 export function Navbar() {
7   const { isAuthenticated, isLoading, user, login, logout } = useSignifyAuth();
8 
9   if (isLoading) {
10     return <nav>Loading...</nav>;
11   }
12 
13   return (
14     <nav>
15       {isAuthenticated ? (
16         <>
17           <span>Welcome, {user?.name}!</span>
18           <button onClick={logout}>Logout</button>
19         </>
20       ) : (
21         <button onClick={login}>Login with Signify iD</button>
22       )}
23     </nav>
24   );
25 }

That's it! 🎉

Your app now supports Signify iD authentication. Users will be redirected to Signify iD for login, and the SDK handles token extraction and session validation automatically.

Next Steps

You're all set! Here's what to explore next:

→Learn about the complete SDK API Reference
→Explore advanced usage patterns and configuration options
→Set up role-based access control in your app

Need help?

Check out our FAQ section for common issues, or reach out to our support team if you need assistance.

1	// app/layout.tsx (Next.js App Router)
2	import { SignifyProvider } from "signifyid/client";
3
4	export default function RootLayout({
5	children,
6	}: {
7	children: React.ReactNode;
8	}) {
9	return (
10	<html lang="en">
11	<body>
12	<SignifyProvider
13	config={{
14	apiUrl: process.env.NEXT_PUBLIC_SIGNIFY_API_URL!,
15	loginUrl: process.env.NEXT_PUBLIC_SIGNIFY_LOGIN_URL!,
16	}}
17	>
18	{children}
19	</SignifyProvider>
20	</body>
21	</html>
22	);
23	}

1	// app/dashboard/page.tsx
2	import { ProtectedRoute } from "signifyid/client";
3	import Dashboard from "./Dashboard";
4
5	export default function DashboardPage() {
6	return (
7	<ProtectedRoute>
8	<Dashboard />
9	</ProtectedRoute>
10	);
11	}

1	// components/Navbar.tsx
2	"use client";
3
4	import { useSignifyAuth } from "signifyid/client";
5
6	export function Navbar() {
7	const { isAuthenticated, isLoading, user, login, logout } = useSignifyAuth();
8
9	if (isLoading) {
10	return <nav>Loading...</nav>;
11	}
12
13	return (
14	<nav>
15	{isAuthenticated ? (
16	<>
17	<span>Welcome, {user?.name}!</span>
18	<button onClick={logout}>Logout</button>
19	</>
20	) : (
21	<button onClick={login}>Login with Signify iD</button>
22	)}
23	</nav>
24	);
25	}