> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Social Login

> Hook Para social login into the unified Flutter auth flow

export const Card = ({imgUrl, title, description, href, horizontal = false, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  const handleClick = e => {
    e.preventDefault();
    if (newTab) {
      window.open(href, '_blank', 'noopener,noreferrer');
    } else {
      window.location.href = href;
    }
  };
  return <div className={`not-prose relative my-2 p-[1px] rounded-xl transition-all duration-300 ${isHovered ? 'bg-gradient-to-r from-[#FF4E00] to-[#874AE3]' : 'bg-gray-200'}`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <a href={href} onClick={handleClick} className={`not-prose flex ${horizontal ? 'flex-row' : 'flex-col'} font-normal h-full bg-white overflow-hidden w-full cursor-pointer rounded-[11px] no-underline`}>
        {imgUrl && <div className={`relative overflow-hidden flex-shrink-0 ${horizontal ? 'w-[30%] rounded-l-[11px]' : 'w-full'}`} onClick={e => e.stopPropagation()}>
            <img src={imgUrl} alt={title} className="w-full h-full object-cover pointer-events-none select-none" draggable="false" />
            <div className="absolute inset-0 pointer-events-none" />
          </div>}
        <div className={`flex-grow px-6 py-5 ${horizontal ? 'w-[70%]' : 'w-full'} flex flex-col ${horizontal && imgUrl ? 'justify-center' : 'justify-start'}`}>
          {title && <h2 className="font-semibold text-base text-gray-800 m-0">{title}</h2>}
          {description && <div className={`font-normal text-gray-500 re leading-6 ${horizontal || !imgUrl ? 'mt-0' : 'mt-1'}`}>
              <p className="m-0 text-xs">{description}</p>
            </div>}
        </div>
      </a>
    </div>;
};

Para treats OAuth the same as email and phone authentication: trigger the flow, reuse the One-Click block, and fall back to
passkey/password only if you explicitly enable them.

<Info>
  Have your own OpenID Connect provider? Once you [set up Custom OIDC](/v3/general/developer-portal-custom-oidc), use `CUSTOM_OIDC` as the OAuth method — it works like any other provider.
</Info>

## Before You Start

* Complete the base setup so your app has a custom URL scheme and a shared `FlutterWebAuthSession`
  ([setup guide](/v3/flutter/setup#build-your-authentication-flow)).
* Add social buttons alongside your email/phone inputs; users should see all auth options together.

## Handle Social Login

```dart lib/views/authentication_view.dart theme={null}
Future<void> handleSocialLogin(OAuthMethod provider) async {
  try {
    final authState = await para.verifyOAuth(
      provider: provider,
      appScheme: 'yourapp',
    );

    if (authState.loginUrl?.isNotEmpty == true) {
      await para.presentAuthUrl(
        url: authState.loginUrl!,
        webAuthenticationSession: webAuthSession,
      );

      final nextStage = authState.effectiveNextStage;
      if (nextStage == AuthStage.signup) {
        await para.waitForSignup();
      } else {
        await para.waitForLogin();
      }

      await para.touchSession();
      await para.fetchWallets();
      return;
    }

    if (authState.stage == AuthStage.login) {
      try {
        await para.touchSession();
      } catch (_) {
        // Session refresh is best-effort for OAuth callbacks
      }
      await para.fetchWallets();
      // Navigate to your main app flow
    }
  } catch (e) {
    debugPrint('OAuth login failed: $e');
  }
}
```

> Same pattern as the example app (`examples-hub/mobile/with-flutter/lib/screens/auth_screen.dart`).

## Provider Enum Reference

| Provider | Enum                  |
| -------- | --------------------- |
| Google   | `OAuthMethod.google`  |
| Apple    | `OAuthMethod.apple`   |
| Discord  | `OAuthMethod.discord` |

Other providers (Twitter, Facebook, Farcaster, etc.) are not part of the default Flutter example or this guide. Refer to the
API reference to see which ones your project supports today.

## See It in Action

<Card horizontal title="Flutter Example App" imgUrl="/images/v3/framework-flutter.png" href="https://github.com/getpara/examples-hub/tree/3.0.0/mobile/with-flutter" description="Authentication screen with email/phone One-Click and social buttons" />