5 replies

How to change the redirect after linking a social provider?

I'm having a hard time figuring out how I can tell

better-auth

better-auth

to redirect to, let's say,

/dashboard/connections/discord

/dashboard/connections/discord

after a user links their Discord account to their main account via:

<button
  onclick={async () =>
    await authClient.linkSocial({
      provider: "discord"
    })}>
  Link Discord Account
</button>

<button
  onclick={async () =>
    await authClient.linkSocial({
      provider: "discord"
    })}>
  Link Discord Account
</button>

Currently, after linking a Discord account,

better-auth

better-auth

redirects the user to the home page (

), which is weird and very bad UX, as the linking initiated on

/dashboard/connections/discord

/dashboard/connections/discord

, a user would assume that they get back to the same page after going through the linking process.

src/lib/server/auth.ts

src/lib/server/auth.ts

// ...
  account: {
    accountLinking: {
      trustedProviders: ["discord"],
      allowDifferentEmails: true
    }
  },
  socialProviders: {
    discord: {
      clientId: DISCORD_CLIENT_ID as string,
      clientSecret: DISCORD_CLIENT_SECRET as string,
      scope: ["identify"],
      disableSignUp: true,
      disableDefaultScope: true,
      disableImplicitSignUp: true,
      enabled: true
    }
  },
// ...

// ...
  account: {
    accountLinking: {
      trustedProviders: ["discord"],
      allowDifferentEmails: true
    }
  },
  socialProviders: {
    discord: {
      clientId: DISCORD_CLIENT_ID as string,
      clientSecret: DISCORD_CLIENT_SECRET as string,
      scope: ["identify"],
      disableSignUp: true,
      disableDefaultScope: true,
      disableImplicitSignUp: true,
      enabled: true
    }
  },
// ...

Solution

You can pass in a callback url with the provider like

await authClient.linkSocial({
provider: "discord",
callbackURL: "/dashboard/connections/discord"
});