# Social Login

Social login uses a **popup window flow**. The popup navigates through the OAuth redirect loop and communicates the result back to the parent window via `window.postMessage`, keeping the JWT out of the browser's URL history, server logs, and referrer headers.

## Supported Providers[​](#supported-providers "Direct link to Supported Providers")

Providers must be configured by the tenant administrator in **Organization Settings → Login Providers**. Supported providers include Google, Apple, and Facebook.

## Using the allegro-login-form Component[​](#using-the-allegro-login-form-component "Direct link to Using the allegro-login-form Component")

The [`<allegro-login-form>`](/developer/components/login-form.md) web component includes social login buttons automatically:

```html
<allegro-login-form></allegro-login-form>

```

To hide the social buttons:

```html
<allegro-login-form hide-third-party="true"></allegro-login-form>

```

The component fires `allegro:login-form:social-success` with `{ provider, session_id, token }` on successful OAuth login.

## Using the SDK[​](#using-the-sdk "Direct link to Using the SDK")

Call `allegro.member.loginWithProvider(provider)` to open the OAuth popup and await the result:

```js
try {
    const { session_id, token } =
        await allegro.member.loginWithProvider('google');
    console.log('Authenticated, session:', session_id);
} catch (error) {
    console.error('Auth failed:', error);
}

```

Pass the provider slug as a string — for example `'google'`, `'apple'`, or `'facebook'`. The method opens the popup, waits for the OAuth flow to complete, and resolves with the session on success or rejects on failure.

**Response shape:**

```ts
{
    session_id: string; // UUID of the newly created audience member session
    token: string; // Signed JWT for the session
}

```

## Reading the Provider Profile[​](#reading-the-provider-profile "Direct link to Reading the Provider Profile")

After a member authenticates with a provider, Allegro stores the raw profile data returned by that provider (name, email, avatar URL, etc.). You can fetch this data in your templates using `allegro.member.externalProfile(provider)`:

```js
window.allegro.push(async (allegro) => {
    if (!allegro.member.isAuthenticated()) return;

    try {
        const profile = await allegro.member.externalProfile('google');
        console.log(profile.name, profile.email, profile.picture);
    } catch (error) {
        // Member has no Google profile, the request failed, or the session expired
        console.error('Profile not found:', error);
    }
});

```

Pass the provider slug as a string (e.g. `'google'`, `'apple'`, `'facebook'`). The method returns the raw attributes stored for that provider — the exact shape depends on what each provider includes in their response. The method throws if the member has no linked profile for the given provider, so always wrap the call in a `try/catch`.

## Related[​](#related "Direct link to Related")

* [Magic Links guide](/developer/guides/authentication/magic-links.md) — passwordless authentication via email
* [allegro-login-form component](/developer/components/login-form.md) — drop-in UI for social + magic link login