docs: missing linking to external accounts (oauth) in custom flow

[saidbenmoumen]

So i have looked all over the documentations it lacks a lot in terms of custom flow if someone wants to integrate their own UI & Flow. Most can be mitigated somehow with the current docs but the external accounts oauth (facebook, google, ...) linking after being signed up.

i had to go deep into @clerk's type definitions in node_modules to find that out.. and.. that's not very developer friendly.

here's a basic implementation..

getting current external accounts linked:

const { session } = useSession()
const externalAccounts = session?.user.externalAccounts

triggers the link to a new external account

  async function handleLink(id: OAuthProvider) {
    const newExternalAccount =
      await session?.user.createExternalAccount({
        strategy: `oauth_${id}`,
        redirectUrl: 'path_to_be_redirect_to', // you can use current path or what works for you
      })

    if (newExternalAccount) handleVerify(newExternalAccount)
  }

triggers verification of linked external account

  async function handleVerify(account: ExternalAccountResource) {
    const verificationURL =
      account.verification?.externalVerificationRedirectURL
    if (verificationURL) router.push(verificationURL.href)
  }

handles unlinking

  async function handleUnlink(account: ExternalAccountResource) {
    await account.destroy()
  }

external account status

you can check for what buttons/handlers to show/use when looping through externalAccounts.map((account) => ...) defined eariler with account.verification?.status

hope this gets fixed in the documentation, even a paragraph would be better than nothing :)

[alexisintech]

So we're currently working on this guide actually: #1822
But the "triggers verification of linked external account" and "handles unlinking" would be great sections to add to the guide. Thank you for these suggestions!!

cc @royanger

[royanger]

The new doc just shows the verification status. We could add the re-verification to the doc -- show that the external account is unverified as a button and that button triggers the re-verification.

It would need to check the status and only show in select situations, but its a good addition. I can add this tomorrow if you want @alexisintech

[alexisintech]

The new doc just shows the verification status. We could add the re-verification to the doc -- show that the external account is unverified as a button and that button triggers the re-verification.

It would need to check the status and only show in select situations, but its a good addition. I can add this tomorrow if you want @alexisintech

yeah I'd appreciate if you could add that ! I think you already have a remove button so we're good on that :)