[@hono/auth-js] basePath can not be set to an absolute path

[KilianB]

Which middleware has the bug?

@hono/auth-js

What version of the middleware?

1.0.5

What version of Hono are you using?

4.7.5

What runtime/platform is your app running on? (with version if possible)

bun 1.2.9

What steps can reproduce the bug?

The backend is running on a different port / url. I attempt to set a new base path via the authConfigManager

import { authConfigManager, SessionProvider } from '@hono/auth-js/react';

authConfigManager.setConfig({
  basePath: 'http://localhost:8000/api/auth', // if auth route is diff from /api/auth
});

And use a simple sign up method

"use client"

import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { signIn } from '@hono/auth-js/react';

export function LoginForm({
  className,
  ...props
}: React.ComponentProps<'form'>) {
  // const providers = await getProviders();

  // console.log('Providers', providers);

  return (
    <form
      action={() => {
        // 'use server';
        signIn('github');
      }}
    >
      <button type="submit">Sign In</button>
    </form>
  );
}


### What is the expected behavior?

A request is made against `http://localhost:8000/api/auth/session`

### What do you see instead?

A request is attempted against `http://localhost:3000http://localhost:8000/api/auth/session`

### Additional information

Additional question is if CORS would work correctly in this case and if the cookies would be set for the correct domains.

[keshabmanni]

Hi, facing the same issue. Any workaround for this?

[yusukebe]

@divyam234 Can you handle this?

[te2wow]

I reproduced this issue and looked into the root cause.

The URL is built by simple string concatenation:

// client.ts:110
const url = `${config.baseUrl}${config.basePath}/${path}`

When basePath is set to an absolute URL like http://localhost:8000/api/auth, baseUrl (http://localhost:3000 from window.location.origin) is prepended, resulting in http://localhost:3000http://localhost:8000/api/auth/session.

I confirmed this with the following tests:

describe('basePath with absolute URL (#1104)', () => {
  it('should produce broken URL when basePath is set to an absolute URL', () => {
    const baseUrl = parseUrl('http://localhost:3000').origin
    const basePath = 'http://localhost:8000/api/auth'
    const url = `${baseUrl}${basePath}/session`
    // This is the bug: baseUrl and basePath are concatenated as strings
    expect(url).toBe('http://localhost:3000http://localhost:8000/api/auth/session')
  })

  it('should produce correct URL when baseUrl and basePath are set separately', () => {
    const baseUrl = 'http://localhost:8000'
    const basePath = '/api/auth'
    const url = `${baseUrl}${basePath}/session`
    expect(url).toBe('http://localhost:8000/api/auth/session')
  })
})

Workaround: Set baseUrl and basePath separately:

authConfigManager.setConfig({
  baseUrl: 'http://localhost:8000',
  basePath: '/api/auth',
})

As a fix, setConfig could handle absolute URLs in basePath by splitting them automatically:

setConfig(userConfig: Partial<AuthClientConfig>): void {
  if (userConfig.basePath && userConfig.basePath.startsWith('http')) {
    const url = new URL(userConfig.basePath)
    userConfig.baseUrl = url.origin
    userConfig.basePath = url.pathname
  }
  this.config = { ...this.config, ...userConfig }
}

I can open a PR for this if needed.

[yusukebe]

@te2wow It's a bug. Can you create a PR? Thanks.

[te2wow]

I've opened a PR to fix this: #1743