> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inboxy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js

> Get up and running with Inboxy

## Install the SDK

<CodeGroup>
  ```bash npm theme={null}
  npm add inboxy
  ```

  ```bash pnpm theme={null}
  pnpm add inboxy
  ```

  ```bash yarn theme={null}
  yarn add inboxy
  ```
</CodeGroup>

## Add your API key and webhook URL to .env

```bash theme={null}
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

<CodeGroup>
  ```typescript _app.tsx theme={null}
  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>
  	);
  }
  ```

  ```typescript _app.jsx theme={null}
  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>
  	);
  }
  ```
</CodeGroup>

## Add Authentication flow

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

> Note: This does not replace your existing authentication flow.

<CodeGroup>
  ```typescript _app.tsx theme={null}
  import { InboxyAuthButton } from "inboxy/next";

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

  ```typescript _app.jsx theme={null}
  import { InboxyProvider } from "inboxy/next";

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