DEV Community: Aryaman Sharma

Implementing Federated Sign-Out with Auth.js in Next.js 14 App Router

Aryaman Sharma — Sat, 28 Sep 2024 16:48:23 +0000

In this blog post, we'll explore how to implement federated sign-out using Auth.js (formerly NextAuth.js) in a Next.js 14 application.

We'll be using an OpenID Connect standardized Duende server as our authentication provider.

The Challenge

Auth.js doesn't provide built-in support for federated sign-out as defined by the OpenID Connect standard. This means we need to implement it manually to ensure our users are properly signed out from both the client application and the identity provider.

Understanding Federated Sign-Out

When a user is logged in via an OAuth client, a federated sign-out involves logging the user out from two places:

The identity provider (IdP)
The client application Federated sign-out aims to log the user out of both sessions simultaneously. Authjs's signOut() function only addresses the client-side session, leaving them logged in on the provider's side. ## Approach:

Our solution involves:

Custom Sign-out Button: Initiates the federated sign-out process.
api/auth/federated-logout Route: Returns the URL for redirection for provider sign-out.
federatedLogout Function: Handles the overall process.
Sign out Page Component: Cleans up the client-side session upon user return.

Implementing solution

1. Enabling Access to `id_token_hint`:

Auth.js doesn't directly provide the original id_token from the provider, you need to expose the ID token received from the provider so that it can be used during the sign-out process. We can achieve this by modifying our Auth.js configuration:


//Changes to callbacks
callbacks: {
  session({ session, token }) {
    session.user.idToken = token.idToken;  // Attach the id_token from the token to the session object
    return session;
  },
  jwt: async ({ token, user, trigger, session }) => {
    if (user) {
      token.idToken = user.idToken; //extract and store the id_token
    }
    return token;
  },
},

// ...

const providers: Provider[] = [
  DuendeIDS6Provider({
    clientId: env.DUENDE_IDS6_ID,
    clientSecret: env.DUENDE_IDS6_SECRET,
    issuer: env.DUENDE_IDS6_ISSUER,
    profile(profile, tokens) {
      return { ...profile,  
       idToken: tokens.id_token };// Store the id_token in the session for future use.
    },
  }),
];

Profile Callback: Adds the id_token from the OpenID provider to the user object during login.
JWT Callback: Ensures that the id_token is stored inside the token object.
Session Callback: Exposes the id_token in the user session, making it available client-side for the federated sign-out process.

These changes ensure that the original ID token is stored in the session and can be accessed when needed for the federated logout process.

2. Sign out button

Now let's create a custom sign-out button that triggers our federated logout process:

// components/signoutButton.tsx

import { federatedLogout } from "@/lib/utils";

const NavbarProfile = () => {

  return (
    // ... 
    <button onClick={federatedLogout}>Logout</button>
    // ...
  );
};

Here, federatedLogout() is the function that triggers the federated sign-out process.

3. Implement the Federated Logout Function

Next, we'll create a federatedLogout function that initiates the sign-out process:

// lib/utils.ts

export async function federatedLogout() {
  try {
    const response = await fetch("/api/auth/federated-logout");
    const data = await response.json();
    if (response.ok) {
      window.location.href = data.url;
      return;
    }
  } catch (error) {
    console.log(error);
    window.location.href = "/";
  }
}

The federatedLogout() function makes a request to our API to get the provider's end session URL and then redirects the user to that URL.

4. Create the Federated Logout API Route (`/api/auth/federated-logout`)

This API route builds the end session URL, which will log the user out of the OpenID provider. It uses the user's ID token and a post_logout_redirect_uri

// app/api/auth/federated-logout/route.ts

import { auth } from "@/auth";
import { env } from "@/env";
import { DEFAULT_LOGIN_REDIRECT_URL } from "@/routes";

export async function GET() {
  let redirectPath: string = DEFAULT_LOGIN_REDIRECT_URL;
  try {
    const session = await auth();
    if (session) {
      const endSessionURL = new URL(
        `${env.DUENDE_IDS6_ISSUER}connect/endsession`
      );
      const redirectURL = `https://${productionURL}/auth/signout`;
      const endSessionParams = new URLSearchParams({
        id_token_hint: session.user.idToken,
        post_logout_redirect_uri: redirectURL,
      });
      const redirectPath = `${endSessionURL}?${endSessionParams.toString()}`;
    }
  } catch (error) {
    console.error(error);
  }
  return Response.json({ url: redirectPath });
}

This route constructs the IdP's end session URL with the necessary parameters:

id_token_hint: The original ID token received from the IdP at login
post_logout_redirect_uri: The URL to redirect to after successful logout from the IdP

5. Create a Sign-Out Page Component

Finally, we'll create a sign-out page component that handles the redirect from the IdP and completes the client-side logout by calling signOut() to clear the client-side session.

// app/auth/signout/page.tsx

"use client";

import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default function Logout() {
  const router = useRouter();

  useEffect(() => {
    signOut({ redirect: false }).then(() => {
      router.push("/");
    });
  }, []);

  return (
    <div className="h-screen w-full flex flex-col items-center justify-center">
      <span>loading...</span>
    </div>
  );
}v

Conclusion

By implementing this federated sign-out solution, we ensure that users are properly logged out from both our Next.js application and the identity provider. This approach adheres to the OpenID Connect standard and provides a secure and seamless logout experience for users.

Setting up Mantine with Tailwind CSS using Emotion cache

Aryaman Sharma — Wed, 07 Jun 2023 13:25:28 +0000

Working with Mantine and Tailwind CSS

If you have tried setting up Mantine and Tailwind in your project, you would have faced this issue where mantine and tailwind styles end up conflicting with each other. As a result it introduces several unwanted behaviours like your buttons disappearing and only showing when hovered over.

Cause

The reason this issue arises is mantine's styles getting overridden by tailwinds. Specifically, tailwinds preflight styles.
These preflight styles are applied by default by tailwind in order to normalize styles across different browsers. As a result mantine's style aren't applied correctly

Solution

In order to resolve this issue, one solution would be to disable these preflight styles
completely.

Here is how you would implement in your Next.js app:

import "../styles/globals.css";
import { MantineProvider } from "@mantine/core";
import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS //Instructing mantine to apply necessary CSS reset or noramlization styles in your application
      theme={{
        colorScheme: "light",
      }}
    >
      <Component {...pageProps} />
    </MantineProvider>
  );
}

export default MyApp;

And modify your tailwind config as follows:

 /** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    preflight: false, //disabling preflight
  },
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

This will disable preflight styles applied by tailwind to solve your issue.

You can follow this approach in your react projects as well.

But it might not be the solution you require as it has it's own caveats like

Tailwind CSS's preflight styles include a CSS reset or normalization that establishes a consistent baseline across browsers. Disabling preflight will impact the baseline styles implemented by tailwind CSS.
It may result in a divergence from the default styling provided by CSS. If you have a high dependency on default styles provided by CSS, disabling preflight will sure shot hit your design consistency

Using Emotion Cache

Emotion.js is a CSS-in-JS library for styling your react/next components.
Mantine uses emotion under the hood. Emotion cache is a caching system provided by Emotion Library. It caches your styles in memory which is used in subsequent renders for your app. We will use this emotion cache in order to prepend Mantine's style so that they are applied after the tailwind's preflight styles

Lets see how to implement this approach:

Assuming you have a Next.js/React Project setup with tailwind and mantine.

You can follow the steps for each of them here:

Tailwind
Next.js: https://tailwindcss.com/docs/guides/nextjs
React.js: https://tailwindcss.com/docs/guides/create-react-app

Mantine
Next.js: https://mantine.dev/guides/next/
React.js: https://mantine.dev/guides/cra/

To implement emotion cache, we need to get dependencies:

npm install @emotion/react @emotion/cache

yarn add @emotion/react @emotion/cache

Now, In your _app.jsx/tsx import the CacheProvider and createCache respectively. In react you can perform these steps in your App.js

import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

Then create an emotion cache

function MyApp({ Component, pageProps }: AppProps) {
 const cache = createCache({ key: "mantine", prepend: false });
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      theme={{
        colorScheme: "light",
      }}
    >
      <Component {...pageProps} />
    </MantineProvider>
  );

When creating the cache we pass in two things, key and a boolean option called prepend.
The key is used by emotion to identify the cache. And prepend option plays an important role of
The prepend option lets us control the order in which the styles are injected in the page.
This would help in resolving the issue by fixing the order in which the styles are applied between mantine and tailwind.
if you want Mantine styles to take precedence over Tailwind CSS styles, you can set the prepend option to true for Mantine and false for Tailwind CSS.

After that wrap your components with the CacheProvider passing the cache as a prop to the provider, like so:

function MyApp({ Component, pageProps }: AppProps) {
  const cache = createCache({ key: "mantine", prepend: false });
  return (
    <CacheProvider value={cache}>
      <MantineProvider
        withGlobalStyles
        theme={{
          /** Put your mantine theme override here */
          colorScheme: "light",
        }}
      >
        <Component {...pageProps} />
      </MantineProvider>
    </CacheProvider>
  );
}

Instead of using CacheProvider, you can pass the cache object to the MantineProvider as well by with the prop called "emotionCache"

function MyApp({ Component, pageProps }: AppProps) {
  const cache = createCache({ key: "mantine", prepend: false });
  return (
    <MantineProvider
      withGlobalStyles
      emotionCache={cache}
      theme={{
        /** Put your mantine theme override here */
        colorScheme: "light",
      }}
    >
      <Component {...pageProps} />
    </MantineProvider>
  );
}

And you are ready to go as you styles you apps with Mantine and Tailwind.
Here is the repository with the mentioned implementation:
https://github.com/TheLazron/mantine-tailwind