Alchemy Logo

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

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

You can implement Social Login authentication in two ways:

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

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

To add authentication in a modal popup:

import React from "react";
import { useAuthModal } from "@account-kit/react";
 
export default function MyPage() {
  const { openAuthModal } = useAuthModal();
 
  return <button onClick={openAuthModal}>Sign in</button>;
}

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

Or:

To embed authentication directly in your page:

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

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

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

import { AlchemyAccountsUIConfig, createConfig } from "@account-kit/react";
import { sepolia, alchemy } from "@account-kit/infra";
 
const uiConfig: AlchemyAccountsUIConfig = {
  auth: {
    sections: [
      [
        // Include social login providers
        { type: "social", authProviderId: "google", mode: "popup" },
        { type: "social", authProviderId: "facebook", mode: "popup" },
        { type: "social", authProviderId: "apple", mode: "popup" },
      ],
    ],
  },
};
 
export const config = createConfig(
  {
    transport: alchemy({ apiKey: "your-api-key" }),
    chain: sepolia,
    // Required for popup flow
    enablePopupOauth: true,
  },
  uiConfig,
);

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

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

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

import { useAuthenticate } from "@account-kit/react";
 
// Inside your component
const { authenticate, isPending } = useAuthenticate();
 
// For redirect flow
const handleGoogleRedirectLogin = () => {
  authenticate(
    {
      type: "oauth",
      authProviderId: "google",
      mode: "redirect",
      redirectUrl: "/", // Redirect to this page after authentication
    },
    {
      onError: (error) => {
        // Handle error
        // The page will redirect on success, so no need for onSuccess handler
      },
    },
  );
};
 
// For popup flow
const handleGooglePopupLogin = () => {
  authenticate(
    {
      type: "oauth",
      authProviderId: "google",
      mode: "popup",
    },
    {
      onSuccess: () => {
        // Authentication successful!
      },
      onError: (error) => {
        // Handle error
      },
    },
  );
};

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.

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

Was this page helpful?