Better Auth•4mo ago

What im missing?

Im using Github provider on next js and hono for api, hono runs on different port, since is used outside of next js, and not nested like it can, but i can login, but then i get this callback ERROR, where im doing something wrong

import { createAuthClient } from 'better-auth/react';
export const authClient = createAuthClient({
  baseURL: 'http://localhost:4000', // hono domain
});

export const { signIn, signUp, useSession } = createAuthClient();

import { PrismaClient } from '@/generated/prisma';
import { betterAuth } from 'better-auth';
import { prismaAdapter } from 'better-auth/adapters/prisma';

const prisma = new PrismaClient();

export const auth = betterAuth({
  database: prismaAdapter(prisma, {
    provider: 'postgresql',
  }),
  socialProviders: {
    github: {
      clientId: process.env.GITHUB_CLIENT_ID as string,
      clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
    },
  },
});

import { createAuthClient } from 'better-auth/react';
export const authClient = createAuthClient({
  baseURL: 'http://localhost:4000', // hono domain
});

export const { signIn, signUp, useSession } = createAuthClient();

import { PrismaClient } from '@/generated/prisma';
import { betterAuth } from 'better-auth';
import { prismaAdapter } from 'better-auth/adapters/prisma';

const prisma = new PrismaClient();

export const auth = betterAuth({
  database: prismaAdapter(prisma, {
    provider: 'postgresql',
  }),
  socialProviders: {
    github: {
      clientId: process.env.GITHUB_CLIENT_ID as string,
      clientSecret: process.env.GITHUB_CLIENT_SECRET as string,
    },
  },
});

External Hono Implementation

app.use('/api/*', cors({ origin: 'http://localhost:3000', credentials: true }));

app.on(['POST', 'GET'], '/api/auth/**', (c) => auth.handler(c.req.raw));

app.use('/api/*', cors({ origin: 'http://localhost:3000', credentials: true }));

app.on(['POST', 'GET'], '/api/auth/**', (c) => auth.handler(c.req.raw));

18 Replies

devve2kccOP•4mo ago

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/auth/:path*',
        destination: 'http://localhost:4000/api/auth/:path*',
      },
    ];
  },
};

export default nextConfig;

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/auth/:path*',
        destination: 'http://localhost:4000/api/auth/:path*',
      },
    ];
  },
};

export default nextConfig;

i dont know if this is an good aproah but seams to fix the problem, i removed the baseUrl from the auth client, and i do that, with the baseUrl set to the hono server domain, does not work

devve2kccOP•4mo ago

something is wrong now

Blank•4mo ago

while calling signIn.social you can pass in the callback url with your server url as base then you wont need a proxy also I think your hono api is not working correctly

devve2kccOP•4mo ago

import { Hono } from 'hono';
import { auth } from '../../frontend/src/lib/auth';
import { cors } from 'hono/cors';
import Projects from './projects';
import { AppContext } from '../types/shared-context';

const app = new Hono<AppContext>().basePath('/api');

app.use(
  '*',
  cors({
    origin: 'http://localhost:3000', // replace with your origin
    allowHeaders: ['Content-Type', 'Authorization'],
    allowMethods: ['POST', 'GET', 'OPTIONS'],
    exposeHeaders: ['Content-Length'],
    maxAge: 600,
    credentials: true,
  })
);

app.use('*', async (c, next) => {
  const session = await auth.api.getSession({ headers: c.req.raw.headers });

  if (!session) {
    c.set('user', null);
    c.set('session', null);
    return next();
  }

  c.set('user', session.user);
  c.set('session', session.session);
  return next();
});

app.on(['POST', 'GET'], '/api/auth/**', (c) => auth.handler(c.req.raw));

const routes = app.route('/projects', Projects);

app.get('/me', async (c) => {
  const user = c.get('user');
  return c.json(user);
});

app.get('/health', (c) => {
  return c.text('OK');
});

export default {
  port: 4000,
  hostname: '0.0.0.0',
  fetch: app.fetch,
};

import { Hono } from 'hono';
import { auth } from '../../frontend/src/lib/auth';
import { cors } from 'hono/cors';
import Projects from './projects';
import { AppContext } from '../types/shared-context';

const app = new Hono<AppContext>().basePath('/api');

app.use(
  '*',
  cors({
    origin: 'http://localhost:3000', // replace with your origin
    allowHeaders: ['Content-Type', 'Authorization'],
    allowMethods: ['POST', 'GET', 'OPTIONS'],
    exposeHeaders: ['Content-Length'],
    maxAge: 600,
    credentials: true,
  })
);

app.use('*', async (c, next) => {
  const session = await auth.api.getSession({ headers: c.req.raw.headers });

  if (!session) {
    c.set('user', null);
    c.set('session', null);
    return next();
  }

  c.set('user', session.user);
  c.set('session', session.session);
  return next();
});

app.on(['POST', 'GET'], '/api/auth/**', (c) => auth.handler(c.req.raw));

const routes = app.route('/projects', Projects);

app.get('/me', async (c) => {
  const user = c.get('user');
  return c.json(user);
});

app.get('/health', (c) => {
  return c.text('OK');
});

export default {
  port: 4000,
  hostname: '0.0.0.0',
  fetch: app.fetch,
};

seams to have any issue? what you recommend to change?

Blank•4mo ago

remove the basePath('/api')

devve2kccOP•4mo ago

and on the github developer portal, the callback should go to the server?

Blank•4mo ago

also the pattern is /api/auth/* not ** yes

devve2kccOP•4mo ago

what should look like the callback url on the signIn.social

Blank•4mo ago

http://localhost:4000/api/auth/callback/github you mean on the function or github dev portal?

devve2kccOP•4mo ago

on both

Blank•4mo ago

if you mean the function then you can just pass in http://<frontend-url>/home or something

devve2kccOP•4mo ago

is the same?

Blank•4mo ago

callback url is where github will redirect you to you add this in github dev portal after this where you want your user to be is the url you pass in signIn.social you should pass your app's full url there

devve2kccOP•4mo ago

and there i put the server url?

export const authClient = createAuthClient({
  baseURL: 'http://localhost:4000',
});

export const authClient = createAuthClient({
  baseURL: 'http://localhost:4000',
});

Blank•4mo ago

yes

devve2kccOP•4mo ago

very nice, seeams to be fixed thank you bro

Blank•4mo ago

:Okay:

devve2kccOP•4mo ago

i will try now the session token but if i want to put the base path, i just need to remove the /api/ from /api/auth/* right?

Gaming

Programming

What im missing?

Did you find this page helpful?