Handling redirect uri based on different domains

[ian038]

Hello, I am using microsoft strategy. I have two domains, the standard https://www.example.com and the bare domain https://example.com. I added a condition to switch between the two in the redirect uri in the microsoft.server.ts file below:

const authenticator = new Authenticator(sessionServer.sessionStorage)

const setupAuth = async (request: Request): Promise<void> => {
  const urlParser = new URL(request.url)
  const domain = urlParser.hostname

  let baseUrl = config.get('server.baseUrl')

  if (process.env.NODE_ENV === 'production') {
    baseUrl = domain.includes('wwww')
      ? config.get('server.baseUrl')
      : config.get('server.bareUrl')
  }

  const microsoftStrategy = new MicrosoftStrategy(
    {
      clientId: String(config.get('sso.microsoft.client_id')),
      clientSecret: String(config.get('sso.microsoft.client_secret')),
      redirectUri: `${baseUrl}/auth/microsoft/callback`,
      tenantId: String(config.get('sso.microsoft.tenant_id')),
      scope: 'openid profile email',
      prompt: 'select_account',
    },
    async ({ profile }): Promise<User | void> => {
      //create user
    },
  )
  authenticator.use(microsoftStrategy)
}

export { authenticator, setupAuth }

In routes/auth/microsoft.ts:

export const loader = () => redirect(/signin)

export const action = async ({ request }: ActionArgs) => {
  await setupAuth(request)
  return authenticator.authenticate('microsoft', request)
}

In routes/auth/microsoft/callback.ts:

export const loader = async ({ request }: LoaderArgs) => {
  await setupAuth(request)
  const user = (await authenticator.authenticate(
    'microsoft',
    request,
    {},
  )) 

  if (user) {
    return sessionServer.createUserSession({
      request,
      userId: user.id,
      remember: false,
      redirectTo: '/',
    })
  }

  return redirect(/signin)
}

I am also setting maxAge when the user is authenticated:

   this.sessionStorage = createCookieSessionStorage({
      cookie: {
        name: '__session',
        httpOnly: true,
        path: '/',
        sameSite: 'lax',
        secrets: ['somesecret'],
        secure: process.env.NODE_ENV === 'production',
        maxAge: 60 * 60 * 24, // 24 hours
      },
    })

When using the bare domain, it works. But when using the base domain with www., it fails with {"message":"Missing state on session."}. If I remove the bare domain and only use the base domain, it will work. What am I doing wrong here?

[bitofbreeze]

Did you ever figure this out?

[ian038]

Hello, yes I did. Here is what I did to my microsoft.server.ts file. I just build the redirect url based on user request.

const authenticator = new Authenticator(sessionServer.sessionStorage)

const VALID_DOMAINS = [
  'www.test.com',
  'test.com',
]

const setupAuth = async (request: Request): Promise<void> => {
  const urlParser = new URL(request.url)
  const domain = urlParser.hostname

  let baseUrl = config.get('server.baseUrl')

  if (process.env.NODE_ENV === 'production') {
    const domain = urlParser.hostname

    if (VALID_DOMAINS.includes(domain)) {
      baseUrl = `https://${domain}`
    }
  }

  const microsoftStrategy = new MicrosoftStrategy(
    {
      clientId: String(config.get('sso.microsoft.client_id')),
      clientSecret: String(config.get('sso.microsoft.client_secret')),
      redirectUri: `${baseUrl}/auth/microsoft/callback`,
     // ...other properties
    },
    async ({ profile }): Promise<User | void> => {
      //create user
    },
  )
  authenticator.use(microsoftStrategy)
}

export { authenticator, setupAuth }

[sergiodxa]

The recommended solution for this is to create a function that returns the authenticator and setup strategies, this function can receive the request or any other argument you may need to setup the redirect uri.

export function createAuthenticator(request: Request) {
  let url = new URL(request.url)
  let auth = new Authenticator()
  auth.use(new MyStrategy({ redirectURI: new URL(url, "/callback").toString() }))
  return auth
}

[ian038]

Thanks @sergiodxa for this! 👍