feat(auth): Allow users to attach GH profile via social auth

frontend/src/lib/integrations/integrationsLogic.ts

@@ -145,7 +145,7 @@ export const integrationsLogic = kea<integrationsLogicType>([
     })),
     listeners(({ actions, values }) => ({
         handleGithubCallback: async ({ searchParams }) => {
-            const { state, installation_id } = searchParams
+            const { state, installation_id, code } = searchParams
             const { next, token } = fromParamsGivenUrl(state ?? '')
             const stateToken = token || state
             let replaceUrl: string = next || urls.settings('project-integrations')
@@ -158,7 +158,7 @@ export const integrationsLogic = kea<integrationsLogicType>([
 
                     await api.integrations.create({
                         kind: 'github',
-                        config: { installation_id, state: stateToken },
+                        config: { installation_id, state: stateToken, code },
                     })
 
                     actions.loadIntegrations()

frontend/src/scenes/appScenes.ts

@@ -80,6 +80,7 @@ export const appScenes: Record<Scene | string, () => any> = {
     [Scene.OrganizationCreateFirst]: () => import('./organization/Create'),
     [Scene.OrganizationCreationConfirm]: () => import('./organization/ConfirmOrganization/ConfirmOrganization'),
     [Scene.PasswordResetComplete]: () => import('./authentication/PasswordResetComplete'),
+    [Scene.AccountSocialConnected]: () => import('./authentication/AccountSocialConnected'),
     [Scene.PasswordReset]: () => import('./authentication/PasswordReset'),
     [Scene.TwoFactorReset]: () => import('./authentication/TwoFactorReset'),
     [Scene.Person]: () => import('./persons/PersonScene'),

frontend/src/scenes/authentication/AccountSocialConnected.tsx

@@ -0,0 +1,53 @@
+import { useValues } from 'kea'
+import { router } from 'kea-router'
+import { useEffect } from 'react'
+
+import { IconCheckCircle } from '@posthog/icons'
+
+import { BridgePage } from 'lib/components/BridgePage/BridgePage'
+import { SSO_PROVIDER_NAMES } from 'lib/constants'
+import { SceneExport } from 'scenes/sceneTypes'
+
+import type { SSOProvider } from '~/types'
+
+const POSTHOG_CODE_CALLBACK_URL = 'posthog-code://callback'
+
+function providerLabel(provider: string | undefined): string {
+    if (!provider) {
+        return 'Account'
+    }
+    return SSO_PROVIDER_NAMES[provider as SSOProvider] ?? provider
+}
+
+export const scene: SceneExport = {
+    component: AccountSocialConnected,
+}
+
+/**
+ * After OAuth links a social provider from PostHog Code (`next` → /account/social-connected?provider=…).
+ * Redirects to `posthog-code://callback` with a fallback link if the app does not open.
+ */
+export function AccountSocialConnected(): JSX.Element {
+    const { searchParams } = useValues(router)
+    const provider = typeof searchParams.provider === 'string' ? searchParams.provider : undefined
+    const label = providerLabel(provider)
+
+    useEffect(() => {
+        window.location.href = POSTHOG_CODE_CALLBACK_URL
+    }, [])
+
+    return (
+        <BridgePage view="account-social-connected">
+            <div className="flex flex-col items-center gap-4 text-center max-w-lg mx-auto">
+                <IconCheckCircle className="text-success text-5xl shrink-0" />
+                <h2 className="text-xl font-semibold m-0">{label} linked to account</h2>
+                <p className="text-muted mb-0">You can now log into PostHog using {label}.</p>
+                <p className="text-muted mb-0">
+                    <strong>Returning to PostHog Code…</strong>
+                    <br />
+                    <em>If this hasn't happened automatically, get back to the PostHog Code app manually.</em>
+                </p>
+            </div>
+        </BridgePage>
+    )
+}

frontend/src/scenes/sceneTypes.ts

@@ -106,6 +106,7 @@ export enum Scene {
     TwoFactorReset = 'TwoFactorReset',
     Person = 'Person',
     Persons = 'Persons',
+    AccountSocialConnected = 'AccountSocialConnected',
     Pipeline = 'Pipeline',
     PipelineStatus = 'PipelineStatus',
     PipelineNode = 'PipelineNode',

frontend/src/scenes/scenes.ts

@@ -425,6 +425,12 @@ export const sceneConfigurations: Record<Scene | string, SceneConfig> = {
         defaultDocsPath: '/docs/data/persons',
         iconType: 'persons',
     },
+    [Scene.AccountSocialConnected]: {
+        name: 'Account connected',
+        layout: 'plain',
+        projectBased: false,
+        organizationBased: false,
+    },
     [Scene.PreflightCheck]: { onlyUnauthenticated: true, layout: 'plain' },
     [Scene.ProjectCreateFirst]: {
         name: 'Project creation',
@@ -934,6 +940,7 @@ export const routes: Record<string, [Scene | string, string]> = {
     [urls.site(':url')]: [Scene.Site, 'site'],
     [urls.login()]: [Scene.Login, 'login'],
     [urls.login2FA()]: [Scene.Login2FA, 'login2FA'],
+    [urls.accountSocialConnected()]: [Scene.AccountSocialConnected, 'accountSocialConnected'],
     [urls.cliAuthorize()]: [Scene.CLIAuthorize, 'cliAuthorize'],
     [urls.cliLive()]: [Scene.CLILive, 'cliLive'],
     [urls.emailMFAVerify()]: [Scene.EmailMFAVerify, 'emailMFAVerify'],

frontend/src/scenes/urls.ts

@@ -138,6 +138,8 @@ export const urls = {
     login: (): string => '/login',
     login2FA: (): string => '/login/2fa',
     login2FASetup: (): string => '/login/2fa_setup',
+    /** After linking a social provider to an existing session (OAuth `next`; see posthog/api/authentication.py sso_login). */
+    accountSocialConnected: (): string => '/account/social-connected',
     cliAuthorize: (): string => '/cli/authorize',
     cliLive: (): string => '/cli/live',
     emailMFAVerify: (): string => '/login/verify',