Next.js - Starter Kit

Install the SDK

npm add inboxy

pnpm add inboxy

yarn add inboxy

Add your API key and webhook URL to .env

NEXT_PUBLIC_INBOXY_API_KEY=your-api-key
NEXT_PUBLIC_INBOXY_WEBHOOK_URL=http://localhost:3000/api/webhook

Add the Inboxy provider to root layout

import { InboxyProvider } from "inboxy/next";

export function App({ Component, pageProps }: AppProps) {
	return (
		<InboxyProvider 
			apiKey={process.env.NEXT_PUBLIC_INBOXY_API_KEY} 
			webhookUrl={process.env.NEXT_PUBLIC_INBOXY_WEBHOOK_URL}
		>
			<Component {...pageProps} />
		</InboxyProvider>
	);
}

import { InboxyProvider } from "inboxy/next";

export function App({ Component, pageProps }) {
	return (
		<InboxyProvider
			apiKey={process.env.NEXT_PUBLIC_INBOXY_API_KEY}
			webhookUrl={process.env.NEXT_PUBLIC_INBOXY_WEBHOOK_URL}
		>
			<Component {...pageProps} />
		</InboxyProvider>
	);
}

Add Authentication flow

Add the InboxyAuthButton to your page where you want users to authenticate.

Note: This does not replace your existing authentication flow.

import { InboxyAuthButton } from "inboxy/next";

export function Page() {
	return (
		<div>
			<InboxyAuthButton provider="google" text="Sign in with Google" />
		</div>
	);
}

import { InboxyProvider } from "inboxy/next";

export function App({ Component, pageProps }) {
	return (
		<div>
			<InboxyAuthButton provider="google" text="Sign in with Google" />
		</div>
	);
}