Unlocking the power of NextAuth by incorporating wild card or custom domains into the signin logic

Question

Unlocking the power of NextAuth by incorporating wild card or custom domains into the signin logic

My NextJS application is a multi-tenant SaaS application where each customer can choose to use a subdomain on our site or map their custom domain via CNAME.

This setup allows customers to enable their employees to log in on either the subdomain site or custom domain.

Within the [...nextauth].js file, there is a signIn callback that executes after sign-in:

async signIn({ user, account, profile, email, credentials }) {
 return true
},

In this callback, I need to determine which custom domain or subdomain the user is signing in from and apply specific logic accordingly. However, as the callback does not have access to req headers, how can I retrieve the domain/hostname within it? Depending on the domain, my goal is to permit/block signin or trigger other actions.

javascript next.js next-auth

Answer 1

Answer №1

Based on your query, the relevant section of the NextAuth documentation that addresses your specific use case can be found here:

https://next-auth.js.org/configuration/initialization#advanced-initialization

If you define a variable in this manner, it will be accessible within the NextAuth options too, as they share the same scope.

import NextAuth from "next-auth"
import { NextApiRequest, NextApiResponse } from "next"

export default async function authenticate(req: NextApiRequest, res: NextApiResponse) {
  const { host } = req.headers; 
  // utilize the value of 'host' in the NextAuth configuration below

  return await NextAuth(req, res, {
    // ...
  })
}

UPDATE:

To access NextAuth configuration in API routes or getServerSideProps, you can follow this pattern:

import { IncomingMessage } from "http";
import { NextApiRequest, NextApiResponse } from "next";
import NextAuth, { NextAuthOptions } from "next-auth";

export function authenticationOptions(req: IncomingMessage): NextAuthOptions {
  const { host } = req.headers;

  return {
    // ...
  }
};

export default async function authenticate(req: NextApiRequest, res: NextApiResponse) {
    return await NextAuth(req, res, authenticationOptions(req));
}

import { getServerSession } from "next-auth";
import { NextApiRequest, NextApiResponse } from "next";
import { authenticationOptions } from "./auth/[...nextauth]";

export default async function post(req: NextApiRequest, res: NextApiResponse) {
  const session = await getServerSession(req, res, authenticationOptions(req));
  // ...
}

Answer 2

Based on your query, the relevant section of the NextAuth documentation that addresses your specific use case can be found here:

https://next-auth.js.org/configuration/initialization#advanced-initialization

If you define a variable in this manner, it will be accessible within the NextAuth options too, as they share the same scope.

import NextAuth from "next-auth"
import { NextApiRequest, NextApiResponse } from "next"

export default async function authenticate(req: NextApiRequest, res: NextApiResponse) {
  const { host } = req.headers; 
  // utilize the value of 'host' in the NextAuth configuration below

  return await NextAuth(req, res, {
    // ...
  })
}

UPDATE:

To access NextAuth configuration in API routes or getServerSideProps, you can follow this pattern:

import { IncomingMessage } from "http";
import { NextApiRequest, NextApiResponse } from "next";
import NextAuth, { NextAuthOptions } from "next-auth";

export function authenticationOptions(req: IncomingMessage): NextAuthOptions {
  const { host } = req.headers;

  return {
    // ...
  }
};

export default async function authenticate(req: NextApiRequest, res: NextApiResponse) {
    return await NextAuth(req, res, authenticationOptions(req));
}

import { getServerSession } from "next-auth";
import { NextApiRequest, NextApiResponse } from "next";
import { authenticationOptions } from "./auth/[...nextauth]";

export default async function post(req: NextApiRequest, res: NextApiResponse) {
  const session = await getServerSession(req, res, authenticationOptions(req));
  // ...
}

Unlocking the power of NextAuth by incorporating wild card or custom domains into the signin logic

Answer №1

Similar questions

Issues with Angular's http get functionality not functioning as expected

Using AXIOS and VueJs to visually represent data with a two-dimensional array

Black-colored backdrop for Mui modal

Axios is passing an array instead of a JSON object when making a POST request

A guide on creating a Utility function that retrieves all elements in an array starting from the third element

Utilize Vue-cli 3.x to load static resources

Adding a character at the current cursor position in VUE JS

"Integrating `react-textarea-code-editor` with Remix: A Step-by-Step Guide

Saving, displaying, and removing a JSON document

Using HTML Select field to make ajax calls to web services

Are there alternative methods for incorporating react-multi-carousel in a project utilizing NEXT.js and React/Typescript?

"Creating a new element caused the inline-block display to malfunction

"Utilize Node.js to generate a nested array structure with groupings

Angular does not seem to support drop and drag events in fullCalendar

Trouble arises when attempting to establish an isolated scope within Angular alongside UI Bootstrap

Calculate the worth of a specific item within an array of objects and save the outcome as a new attribute

Who is the intended audience for the "engines" field in an npm package - consumers or developers?

Is it possible for the versions in the package.json file to be altered

Scouring the web with Cheerio to extract various information from Twitter

Is there a method I can use to merge similar functions in redux-toolkit?