Remix - Authdog

This document covers basic integration step-by-step with the SDK in a Remix application

Configuring Authdog consumer with remix (node)

Install SDK library in your app @authdog/remix-node

Installation

pnpm


pnpm add @authdog/remix-node

npm


npm install @authdog/remix-node

yarn


yarn add @authdog/remix-node

bun


bun add @authdog/remix-node

Optionally, install @authdog/react-elements, if you want to use pre-made Authdog elements in your React app

pnpm


pnpm add @authdog/react-elements

npm


npm install @authdog/react-elements

yarn


yarn add @authdog/react-elements

bun


bun add @authdog/react-elements

Copy from Authdog console, the public key to be used in the consumer application

Create a .env file at the root of your Remix project.


PK_AUTHDOG=<YOUR_ENVIRONMENT_PUBLIC_KEY>

Configure the SDK in your Remix application

Modify your vite config to ensure process can work with SSR


export default defineConfig({
  ...existing config
  ssr: {
    noExternal: ["@authdog/remix-node"],
  },
});

Then in your root.tsx


...
import type { LinksFunction } from "@remix-run/node";
import styles from "@authdog/react-elements/styles.css?url";
import { AuthdogProvider, ReloadPage } from "@authdog/remix-node/client";
 
export const links: LinksFunction = () => [
  ...
  { rel: "stylesheet", href: styles },
];
 
export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <AuthdogProvider>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
          <ReloadPage /> --> used in dev to reload page, when custom domains aren't configured
        </AuthdogProvider>
      </body>
    </html>
  );
}

Setup logout route

Create a file logout.ts within app/routes/


import { logoutLoader } from "@authdog/remix-node";
 
export const loader = logoutLoader;

Create Layout component with Authdog integration


import { Navbar } from "@authdog/react-elements";
import { useLoaderData, useNavigate } from "@remix-run/react";
 
export const Layout = ({ children }: { children: React.ReactNode }) => {
  const {
    user,
    // isAuthenticated,
    signinUri
  } = useLoaderData<{
    user: any;
    isAuthenticated: boolean;
    signinUri: string;
  }>();
  const navigate = useNavigate();
 
  return <div>
    <Navbar
      key={user?.id}
      logoText={"ACME Corp"}
      items={[]}
      isLoading={false}
      user={user as any}
      onLogout={() => {
        navigate("/logout");
      }}
      onProfileSelected={() => {
        navigate("/profile");
      }}
      onNavigateHome={() => {
        navigate("/");
      }}
      identityHost={new URL(signinUri).origin}
      environmentId={new URL(signinUri).pathname.split("/").pop()}
    />
    {children}
  </div>;
};

Consuming authenticated user identity

This code operates within app/routes/profile.tsx but can work within any valid route.


 
import {
  type MetaFunction,
} from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { identityLoader } from "@authdog/remix-node";
import React from "react";
import { Layout } from "~/components/Layout";
import { ClientOnly } from "@authdog/react-elements";
 
const ClientUserProfile = React.lazy(() => 
  import("@authdog/react-elements").then(mod => ({ 
    default: mod.UserProfile 
  }))
);
 
export const meta: MetaFunction = () => {
  return [
    { title: "Profile - Authdog Remix Demo" },
    { name: "description", content: "User Profile Page" },
  ];
};`
 
export const loader = identityLoader();
 
export default function Profile() {
 
  const { user } = useLoaderData<typeof loader>();
  
  return (
    <Layout>
      <ClientOnly>
        <React.Suspense fallback={<div>Loading profile...</div>}>
          <ClientUserProfile
            user={user}
            loading={false}
          />
        </React.Suspense>
      </ClientOnly>
    </Layout>
  );
}