BA
Better Auth•3mo ago
bkyerv

Google Sign-In Not Working with `authClient.signIn.social()`

I'm implementing Google authentication using better-auth with React. Here's my setup: 1. Client-side auth client: 
import { createAuthClient } from "better-auth/react";
export const authClient = createAuthClient({
  baseURL: "http://localhost:5173",
});
import { createAuthClient } from "better-auth/react";
export const authClient = createAuthClient({
  baseURL: "http://localhost:5173",
});
2. Server-side auth configuration: 
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

export const auth = betterAuth({
  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    },
  },
  database: drizzleAdapter(db, {
    provider: "sqlite",
  }),
});
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

export const auth = betterAuth({
  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    },
  },
  database: drizzleAdapter(db, {
    provider: "sqlite",
  }),
});
3. Sign-in component: 
<button
  onClick={async () =>
    await authClient.signIn.social({
      provider: "google",
      callbackURL: "/dashboard",
      errorCallbackURL: "/error",
      disableRedirect: true,
    })
  }
>
  continue with google
</button>
<button
  onClick={async () =>
    await authClient.signIn.social({
      provider: "google",
      callbackURL: "/dashboard",
      errorCallbackURL: "/error",
      disableRedirect: true,
    })
  }
>
  continue with google
</button>
Issue: When I click the sign-in button, nothing seems to happen. I've configured my Google OAuth credentials and environment variables, but the authentication flow isn't starting. Questions: Am I missing any configuration steps? Is there a way to debug the authentication flow? Should I be handling the response from authClient.signIn.social() differently? Environment: better-auth (latest version) React TypeScript React Router
3 Replies
bekacru
bekacru•3mo ago
have you mounted the auth handler to the server? You'd need to define I think an Action and a loader on a get catch all route 
import { auth } from '~/lib/auth' // import your auth config
import type { LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node" //change the import to react router 
 
export async function loader({ request }: LoaderFunctionArgs) {
    return auth.handler(request)
}
 
export async function action({ request }: ActionFunctionArgs) {
    return auth.handler(request)
}
import { auth } from '~/lib/auth' // import your auth config
import type { LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node" //change the import to react router 
 
export async function loader({ request }: LoaderFunctionArgs) {
    return auth.handler(request)
}
 
export async function action({ request }: ActionFunctionArgs) {
    return auth.handler(request)
}
bkyerv
bkyervOP•3mo ago
can I define the action in the same route /signin? I tried and for some reason the request passed to the handler results in another error: 
Argument of type 'ActionArgs' is not assignable to parameter of type 'Request'.
Type 'ActionArgs' is missing the following properties from type 'Request':
cache, credentials, destination, headers, and 18 more
Argument of type 'ActionArgs' is not assignable to parameter of type 'Request'.
Type 'ActionArgs' is missing the following properties from type 'Request':
cache, credentials, destination, headers, and 18 more
bekacru
bekacru•3mo ago
not on your /sign-in page but on a catch call route under /api/auth path. Check how you define a catch all route in react router

Did you find this page helpful?