BA
Better Auth•2mo ago
7ocomotive

ERROR [Better Auth]: State Mismatch. Verification not found

Hey! I am getting the the callback error screen for Google (/api/auth/error?error=please_restart_the_process) in a couple situations: - If a user is authenticated on a mobile device using Google Chrome and hits the "Desktop site" option in the Chrome page settings - A user is goes through the sign in flow with Google, selects their Google account, is authenticated successfully, but then hits the back button to go back to the Google account select screen (https://accounts.google.com/o/oauth2/auth/oauthchooseaccount?), and then selects the same Google account. A side note: For some reason I am not able to control the UX of auth errors like this one. I've tried passing in a errorCallbackURL to signIn.social, but it doesn't get returned in this situation. Is there a way to redirect users back to the client where I can handle the error on the frontend with custom UI? I apologize if I am missing something. Thank you in advance for the help!
No description
4 Replies
saze
saze•2mo ago
The error /api/auth/error?error=please_restart_the_process occurs because the authentication state token is being invalidated in both scenarios. For context, better-auth creates a one-time state token during OAuth initialization that expires after 10 minutes and is deleted immediately after successful authentication. This is security best practice. In your two scenarios: Mobile Chrome "Desktop site" toggle: This likely causes the browser context to change mid-flow, corrupting the state parameter passed between requests. Back button after authentication: When you first authenticate, the state token is consumed and deleted. When you go back and try again with the same account, Google completes authentication but returns to an app that can't verify the state (because it's already been used). For better UX, you can pass a custom error url in your auth config with onAPIError.errorURL https://www.better-auth.com/docs/reference/options#onapierror
Options | Better Auth
Better Auth configuration options reference.
7ocomotive
7ocomotiveOP•2mo ago
Thank you for your response, @saze . The mobile Chrome "Desktop site" toggle issue occurs after the user has gone through the entire auth flow, so the state token should already have been deleted by a successful authentication? I wonder if it is a bug? I had also tried passing in a onAPIError.errorURL, but it doesn't redirect to the route provided. Any thoughts? 
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import db from "@/db/index.js";
import { account, session, user, verification } from "@/db/schema";
import env from "@/env";

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "pg",
    schema: { user, session, account, verification },
  }),
  emailAndPassword: {
    enabled: true,
  },
  trustedOrigins: ["http://localhost:5173", "https://checklist.benehlert.com"],
  socialProviders: {
    google: {
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    },
  },
  onAPIError: {
    errorURL: "/some-test-error-route",
  },
});
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import db from "@/db/index.js";
import { account, session, user, verification } from "@/db/schema";
import env from "@/env";

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: "pg",
    schema: { user, session, account, verification },
  }),
  emailAndPassword: {
    enabled: true,
  },
  trustedOrigins: ["http://localhost:5173", "https://checklist.benehlert.com"],
  socialProviders: {
    google: {
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    },
  },
  onAPIError: {
    errorURL: "/some-test-error-route",
  },
});
saze
saze•2mo ago
Only API errors will redirect to the provided route, client-side errors will go to the errorCallbackURL in your sign-in options. For the Desktop site issue, maybe open an issue in the gh repo
bjw
bjw•2mo ago
i have the same problem. It looks like the errorURL doesn't work. I use the server action to sign in with google oauth and onAPIError was also defined. If the oauth verification token expires, better-auth redirects me to the api/auth/error route. I just cant deactivate this standard error page. Hi @7ocomotive did you solve this problem? In the production the user should never see this standard error page from better-auth. 
// sign-in.ts
export const signInGoogle = async () => {
  const data = await auth.api.signInSocial({
    body: {
      provider: 'google',
      callbackURL: authSuccessRedirectRoute,
      errorCallbackURL: '/auth-error',
      newUserCallbackURL: authSuccessRedirectRoute,
    },
  });
  redirect(data.url as string);
};
// sign-in.ts
export const signInGoogle = async () => {
  const data = await auth.api.signInSocial({
    body: {
      provider: 'google',
      callbackURL: authSuccessRedirectRoute,
      errorCallbackURL: '/auth-error',
      newUserCallbackURL: authSuccessRedirectRoute,
    },
  });
  redirect(data.url as string);
};
// lib/auth.ts
export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: 'pg',
  }),
  onAPIError: {
    throw: true, // false doesn't work also
    onError: (error, ctx) => {
      console.log('api error!'); // i can't see this log on server side
    },
    errorURL: '/auth-errorx',
  },
  socialProviders: {
    github: {
      clientId: process.env.AUTH_GITHUB_ID!,
      clientSecret: process.env.AUTH_GITHUB_SECRET!,
    },
    google: {
      clientId: process.env.AUTH_GOOGLE_ID!,
      clientSecret: process.env.AUTH_GOOGLE_SECRET!,
    },
  }
}
// lib/auth.ts
export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: 'pg',
  }),
  onAPIError: {
    throw: true, // false doesn't work also
    onError: (error, ctx) => {
      console.log('api error!'); // i can't see this log on server side
    },
    errorURL: '/auth-errorx',
  },
  socialProviders: {
    github: {
      clientId: process.env.AUTH_GITHUB_ID!,
      clientSecret: process.env.AUTH_GITHUB_SECRET!,
    },
    google: {
      clientId: process.env.AUTH_GOOGLE_ID!,
      clientSecret: process.env.AUTH_GOOGLE_SECRET!,
    },
  }
}

Did you find this page helpful?