AuthenticationLogin methods

Social Login Authentication

Social login authentication allows users to authenticate using OAuth providers like Google, Facebook, or custom providers through Auth0. There are two authentication flows available:

  1. Redirect flow: Redirects the user to the provider’s login page and back to your application
  2. Popup flow: Opens the provider’s login page in a popup window without leaving your application

Prerequisites

Before implementing social login in your application, you need to configure your Smart Wallets dashboard and application:

  1. Follow the Setup Instructions in the Getting Started Guide:

    • See the Getting Started with Authentication page for complete setup instructions
    • Pay special attention to the social authentication provider configuration and whitelisted origins setup

  2. Key Configuration Requirements:

    • Enable desired social providers in your Smart Wallets dashboard
    • Add your application’s domain to the whitelisted origins
    • Set enablePopupOauth: true in your config if using popup flow

Implementation Options

You can implement Social Login authentication in two ways:

Pre-built UI Components

Smart Wallets provides pre-built UI components that handle the entire Social Login authentication flow with minimal code.

Step 1: Add Authentication Components to Your Page

Before configuring your authentication, first add one of the pre-built components to your application:

Using Modal Authentication

To add authentication in a modal popup:

1import React from "react";
2import { useAuthModal } from "@account-kit/react";
3
4export default function MyPage() {
5  const { openAuthModal } = useAuthModal();
6
7  return <button onClick={openAuthModal}>Sign in</button>;
8}

For more details on modal configuration, see the Modal Authentication documentation.

Or:

Using Embedded Authentication

To embed authentication directly in your page:

1import React from "react";
2import { AuthCard } from "@account-kit/react";
3
4export default function MyLoginPage() {
5  return (
6    <div className="flex flex-row p-4 bg-white border border-gray-200 rounded-lg">
7      <AuthCard />
8    </div>
9  );
10}

For more details on embedded authentication, see the Embedded Authentication documentation.

Step 2: Configure Social Login in UI Components

After adding the components, configure the Social Login authentication in your application config:

1import { AlchemyAccountsUIConfig, createConfig } from "@account-kit/react";
2import { sepolia, alchemy } from "@account-kit/infra";
3
4const uiConfig: AlchemyAccountsUIConfig = {
5  auth: {
6    sections: [
7      [
8        // Include social login providers
9        { type: "social", authProviderId: "google", mode: "popup" },
10        { type: "social", authProviderId: "facebook", mode: "popup" },
11        { type: "social", authProviderId: "apple", mode: "popup" },
12      ],
13    ],
14  },
15};
16
17export const config = createConfig(
18  {
19    transport: alchemy({ apiKey: "your-api-key" }),
20    chain: sepolia,
21    // Required for popup flow
22    enablePopupOauth: true,
23  },
24  uiConfig,
25);

Custom UI

If you need complete control over the user experience, you can implement your own custom UI for Social Login authentication using Smart Wallets hooks.

Step 1: Configure Your Application

Before implementing social login, make sure you’ve:

  1. Set up your authentication providers in the Smart Wallets dashboard
  2. If using popup flow, set enablePopupOauth: true in your Account Kit configuration

Step 2: Implement the Authentication

Create buttons or UI elements for each social provider you want to support:

1import { useAuthenticate } from "@account-kit/react";
2
3// Inside your component
4const { authenticate, isPending } = useAuthenticate();
5
6// For redirect flow
7const handleGoogleRedirectLogin = () => {
8  authenticate(
9    {
10      type: "oauth",
11      authProviderId: "google",
12      mode: "redirect",
13      redirectUrl: "/", // Redirect to this page after authentication
14    },
15    {
16      onError: (error) => {
17        // Handle error
18        // The page will redirect on success, so no need for onSuccess handler
19      },
20    },
21  );
22};
23
24// For popup flow
25const handleGooglePopupLogin = () => {
26  authenticate(
27    {
28      type: "oauth",
29      authProviderId: "google",
30      mode: "popup",
31    },
32    {
33      onSuccess: () => {
34        // Authentication successful!
35      },
36      onError: (error) => {
37        // Handle error
38      },
39    },
40  );
41};

Next Steps

Enabling Authenticator App (TOTP) MFA

If you want to require a second factor for Social Login, see Social Login with Multi-Factor Authentication. Once users have set up a TOTP-based authenticator app, they’ll be prompted for their 6-digit code automatically.

Custom Social Providers

For custom OAuth providers like GitHub, Twitter, etc., see the Custom Social Providers documentation.