Guides

Quick Start

In this guide, we’re going to walkthrough the steps required to get a minimal application up and running, based on NextJS with an Authdog integration from initial Signup to Integration.

Tenant Setup

The first time you sign up, you’ll see the tenant configuration form. This is where you’ll define your tenant name, associated organization name etc... Once you’ve completed the form, you’ll be redirected to the tenant dashboard.

Application Registration

1. Click on the

   New Application

   button in the dashboard to be redirected to the Application creation form.
2. Fill in the form with the following values:
   • Name:

     YOUR APPLICATION NAME

   • Website:

     YOUR APPLICATION WEBSITE

   • Description:

     YOUR APPLICATION DESCRIPTION

   Once ready, click on the

   Next Step

   button.
3. Add connections to your application, select a provider and click on the

   Settings

   button to configure the connection for the selected environment. Note that you can have one provider configured per environment, and you can change the environment name from the top navigation bar.
4. Once you’ve configured your connections, click on

   Skip Step

   . You’ll be invited to configure the application redirections; this step is required to know where your users should be redirected after a successful (or not) authentication. The next step will be to integrate Authdog SDK in the Next.js application.

SDK Integration

1. Install the Authdog SDK in your Next.js application

   npmyarnpnpm

   1 npm install @authdog/react @authdog/browser @authdog/shared

2. Wrap your Next.js application with AuthdogProvider component

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // pages/_app.tsx import type { AppProps } from "next/app"; import { AuthdogProvider } from "@authdog/react"; export default function App({ Component, pageProps }: AppProps) { const authnUri = "<copied from application configure dashboard in settings/endpoints>"; const webLoginUri = "<copied from application configure dashboard in settings/endpoints>"; return ( <AuthdogProvider authnApi={authnUri} webLoginUri={webLoginUri} {...pageProps} > <Component {...pageProps} /> </AuthdogProvider> ); }

3. Now add a button to trigger the login flow in your application

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import { useEffect } from "react"; import { persistTokenFromUri } from "@authdog/browser"; import { useSignin } from "@authdog/react"; import { DashboardButton } from "../components/DashboardButton"; export default function Home() { useEffect(() => { // this is used to persist the token from the uri to the local storage when you&rsquo;re not using cookie based authentication persistTokenFromUri(); }, []); const { webLoginUri } = useSignin(); return ( <div> // You navbar code or wherever you want to add a Signin button <button onClick={() => window.location.assign(webLoginUri)}> Access Dashboard </button> </div> ); })
   
   Pressing the button will redirect your users to your Authdog managed login page. You’ll see this screen if you didn’t configure a redirection URI. Let’s fix this by adding a redirection URI to your application.

4. Setting up Redirection

   Go to your application dashboard and click on the

   Routing

   tab.
   In redirection form add the desired landing page for your users.
   
   For instance, if you’re developing locally and testing Authdog, you can add

   http://localhost:3000/dashboard

   as a success redirection URI. You also need to set the error redirection, for instance

   http://localhost:3000/error

   .
   
   Go back to your application, click on the Signin button and you should see no error.
   
   Assuming you’ve configured a success redirection URI, you should be redirected to the dashboard page of your Application.

5. Consuming User Identity

   Now that you’ve successfully integrated Authdog in your application, you can start consuming the user identity. To do so, you can use the

   useIdentity

   hook from

   @authdog/react

   :
   
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import { useEffect, useState } from "react"; import { useIdentity } from "@authdog/react"; export default function Dashboard() { const { user } = useIdentity(); return ( {user && ( <div style={{ display: "flex", alignItems: "center" }}> Welcome {user.displayName} &nbsp; <img src={user?.photos?.length > 0 ? user.photos[0].value : ""} width="50" height="50" style={{ borderRadius: "10px" }} /> </div> )} ); }

6. Setting up Logout

   Let’s create a Signout button component, that will call the logout function from

   @authdog/browser

   :
   
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import { logout } from "@authdog/browser"; export const SignoutButton = () => { return ( <a style={{ cursor: "pointer", }} onClick={() => { logout(); }} > <span className="relative">Sign Out</span> </a> ); };

7. Identity wrappers

   Then we can embed it anywhere in our application, we can wrap our authenticated content with the

   SignedIn

   helper.
   
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 import { SignoutButton } from "../components/SignoutButton"; import { SignedIn } from "@authdog/react"; export const Navbar = () => ( <SignedIn> {user && ( <div className="text-2xl"> <div style={{ display: "flex", alignItems: "center" }}> Welcome {user.displayName} &nbsp; <img src={user?.photos?.length > 0 ? user.photos[0].value : ""} width="50" height="50" style={{ borderRadius: "10px" }} /> </div> </div> )} &nbsp;&nbsp; <SignoutButton /> </SignedIn> );

---