Kinde•3mo ago

How to add subdomain auth flow for a multi tenant app?

I already tried setting the KINDE_COOKIE_DOMAIN=.localhost Here's my .env KINDE_CLIENT_ID= KINDE_CLIENT_SECRET= KINDE_ISSUER_URL= KINDE_SITE_URL=http://app.localhost:3000 KINDE_POST_LOGOUT_REDIRECT_URL=http://app.localhost:3000/login KINDE_POST_LOGIN_REDIRECT_URL=http://app.localhost:3000/login KINDE_M2M_ID= KINDE_M2M_SECRET= KINDE_ORG_CODE= KINDE_COOKIE_DOMAIN=.localhost I am using the following for both sign up/login flows from app.localhost and {subdomain}.localhost import { RegisterLink, LoginLink } from "@kinde-oss/kinde-auth-nextjs/server"; When I removed KINDE_COOKIE_DOMAIN, the app.localhost:300/login works properly, but when I add it, I can't sign in and I get logged out as soon as I register.

3 Replies

Oli - Kinde•3mo ago

Hi @conkyyy, Thanks for reaching out. What version of the NextJS SDK are you using? Also, are you able to explain a bit more about what you are trying to achieve? Do you want to have authentication for multiple subdomains - e.g. something like website.yourdomain.com, app.yourdomain.com, docs.yourdomain.com?

KHRM•2mo ago

hoping I can hop on this old thread because im trying to do something similar here is my .env

.env
KINDE_CLIENT_ID=...
KINDE_CLIENT_SECRET=...
KINDE_ISSUER_URL=https://nextboards.kinde.com
KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000

.env
KINDE_CLIENT_ID=...
KINDE_CLIENT_SECRET=...
KINDE_ISSUER_URL=https://nextboards.kinde.com
KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000

I want the user to be able to login from http://localhost:3000 or http://*.localhost:3000 (i.e. http://testing.localhost:3000, http://potato.localhost:3000) and have the same user I log in from http://localhost:3000 and i see my user but when i go to http://testing.localhost:3000 the user is null (also there are no cookies so that makes sense) not sure how to use the wildcard strategy here im usingNext.js v15 app router currently I am using nextjs rewrites to access my subdomain not sure if that is related to the issue

import { NextRequest, NextResponse } from 'next/server'

const ROOT_DOMAIN = process.env.NEXT_PUBLIC_ROOT_DOMAIN

if (!ROOT_DOMAIN) {
  throw new Error('NEXT_PUBLIC_ROOT_DOMAIN is not set')
}

export default async function middleware(req: NextRequest) {
  const nextUrl = req.nextUrl
  let hostname = req.headers.get('host')!

  hostname = hostname.replace(`.${ROOT_DOMAIN}`, '')

  const searchParams = req.nextUrl.searchParams.toString()
  const path = `${nextUrl.pathname}${searchParams ? `?${searchParams}` : ''}`

  if (!hostname || hostname === ROOT_DOMAIN) return NextResponse.next()

  const session = true
  if (!session && path !== '/login') {
    return NextResponse.redirect(new URL('/login', req.url))
  } else if (session && path === '/login') {
    return NextResponse.redirect(new URL('/', req.url))
  }

  return NextResponse.rewrite(new URL(`/site/${hostname}${path}`, nextUrl.href))
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
  ],
}

import { NextRequest, NextResponse } from 'next/server'

const ROOT_DOMAIN = process.env.NEXT_PUBLIC_ROOT_DOMAIN

if (!ROOT_DOMAIN) {
  throw new Error('NEXT_PUBLIC_ROOT_DOMAIN is not set')
}

export default async function middleware(req: NextRequest) {
  const nextUrl = req.nextUrl
  let hostname = req.headers.get('host')!

  hostname = hostname.replace(`.${ROOT_DOMAIN}`, '')

  const searchParams = req.nextUrl.searchParams.toString()
  const path = `${nextUrl.pathname}${searchParams ? `?${searchParams}` : ''}`

  if (!hostname || hostname === ROOT_DOMAIN) return NextResponse.next()

  const session = true
  if (!session && path !== '/login') {
    return NextResponse.redirect(new URL('/login', req.url))
  } else if (session && path === '/login') {
    return NextResponse.redirect(new URL('/', req.url))
  }

  return NextResponse.rewrite(new URL(`/site/${hostname}${path}`, nextUrl.href))
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)',
  ],
}

currently not using kinde middleware since i just set it up (also not sure if that is a facto)

KHRM•2mo ago

folder structure for next.js app router if helpful

Gaming

Programming

How to add subdomain auth flow for a multi tenant app?