Back to DigiCommerce

Social Login

Social Login allows customers to register and log in to your store using their existing social media accounts.

The DigiCommerce Social Login feature supports multiple popular social media platforms including Google, Facebook, LinkedIn, GitHub, Discord, and Amazon, making it convenient for customers to use their preferred platform.

Here are the exact steps to get Client ID and Client Secret for each social provider:

Google OAuth 2.0

  1. Go to Google Cloud Console
  2. Create a new project or select an existing one
  3. Go on API & Services and Credentials
  4. Click + CREATE CREDENTIALS → OAuth client ID
  5. Configure the OAuth consent screen first if prompted
  6. Choose Web application as the application type
  7. Add your website domain to Authorized JavaScript origins:
    • https://yourdomain.com
  8. Add the redirect URI to Authorized redirect URIs:
    • https://yourdomain.com/digicommerce-oauth/google
  9. Click Create
  10. Copy the Client ID and Client Secret

Facebook Login

  1. Go to Facebook Developers
  2. Click My Apps → Create App
  3. Add an App name, your email in App contact email and click Next
  4. Select Authenticate and request data from users with Facebook Login and click Next
  5. Select your business portfolio you want to connect to your app and click Next
  6. On the Requirements step, click Next
  7. Then, click on Go to dashboard
  8. Click on Customize the Authenticate and request data from users with Facebook Login use case
  9. Click Add button for email
  10. Go to Facebook Login → Settings in the left sidebar
  11. Add the redirect URI to Valid OAuth Redirect URIs:
    • https://yourdomain.com/digicommerce-oauth/facebook
  12. Click Save changes
  13. Go back to Dashboard
  14. Click App Review and the Edit button
  15. Click and fill all the required data to make your app approved by Facebook
  16. Go to App Settings → Basic in the left sidebar
  17. Copy the App ID (Client ID) and App Secret (Client Secret)
  18. Paste them in the plugin settings
  19. Make sure your app is live (not in Development mode)

Facebook login is by far the most complicated provider to configure, but do the same steps as the video above and your customers will be able to use their account to login or register to your store.

LinkedIn OAuth 2.0

  1. Go to LinkedIn Developer Platform
  2. Click Create App
  3. Fill in the required information:
    • App name
    • LinkedIn Page (create a company page if needed)
    • App logo
  4. Click Create app
  5. In the Products tab, request access to Sign In with LinkedIn using OpenID Connect
  6. Go to the Auth tab
  7. Add the redirect URL to Authorized redirect URLs for your app:
    • https://yourdomain.com/digicommerce-oauth/linkedin
  8. Go to the Auth tab and copy the Client ID and Client Secret

GitHub OAuth Apps

  1. Go to GitHub Developer Settings
  2. Click OAuth Apps → New OAuth App
  3. Fill in the application details:
    • Application name: Your app name
    • Homepage URL: https://yourdomain.com
    • Authorization callback URL: https://yourdomain.com/digicommerce-oauth/github
  4. Click Register application
  5. Copy the Client ID
  6. Click Generate a new client secret
  7. Copy the Client Secret

Discord OAuth2

  1. Go to Discord Developer Portal
  2. Click New Application
  3. Enter your application name and click Create
  4. Go to the OAuth2 tab in the left sidebar
  5. Add the redirect URI:
    • https://yourdomain.com/digicommerce-oauth/discord
  6. In the OAuth2 → General section:
    • Copy the Client ID
    • Copy the Client Secret

Amazon Login with Amazon

  1. Go to Amazon Developer Console
  2. Sign in and go to Login with Amazon
  3. Click Create a New Security Profile
  4. Fill in the required information:
    • Security Profile Name: Your app name
    • Security Profile Description: Brief description
    • Consent Privacy Notice URL: Your privacy policy URL
  5. Click Save
  6. Click on the gear icon next to your security profile
  7. Click Web Settings tab
  8. Add your domain to Allowed Origins:
    • https://yourdomain.com
  9. Add the redirect URI to Allowed Return URLs:
    • https://yourdomain.com/digicommerce-oauth/amazon
  10. Click Save
  11. Copy the Client ID and Client Secret

Important Notes:

  • Replace yourdomain.com with your actual domain
  • Use https:// for production sites
  • For local development, you may need to add http://localhost or http://127.0.0.1 URLs
  • Some providers require domain verification
  • Make sure your WordPress site has pretty permalinks enabled for the redirect URLs to work
  • Test each provider after configuration to ensure proper functionality

Troobleshoot

If after the login, you are redirected to a 404 page, after enabling the social login setting, go to Settings > Permalinks and click Save Changes.

Advanced Customization

Custom Provider Integration

Developers can add support for additional social login providers. This allows integration with specialized or regional social platforms.

Here an example to include Twitch:

/**
 * Add Twitch provider to existing Social Login instance
 */
add_action( 'init', function() {
    if ( ! class_exists( 'DigiCommerce_Pro_Social_Login' ) ) {
        return;
    }
    
    // Get the existing instance
    $instance = DigiCommerce_Pro_Social_Login::instance();
    
    // Use reflection to modify the private $providers property
    $reflection = new ReflectionClass( $instance );
    $providers_property = $reflection->getProperty( 'providers' );
    $providers_property->setAccessible( true );
    
    // Get current providers
    $current_providers = $providers_property->getValue( $instance );
    
    // Add Twitch
    $current_providers['twitch'] = array(
        'name'         => 'Twitch',
        'auth_url'     => 'https://id.twitch.tv/oauth2/authorize',
        'token_url'    => 'https://id.twitch.tv/oauth2/token',
        'profile_url'  => 'https://api.twitch.tv/helix/users',
        'scope'        => 'user:read:email',
        'icon'         => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#9146FF"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>',
        'button_class' => 'twitch',
    );
    
    // Set the modified providers back
    $providers_property->setValue( $instance, $current_providers );
}, 1 ); // Early priority

/**
 * Add Twitch credentials
 */
add_filter( 'digicommerce_social_login_provider_credentials', function( $credentials, $provider_key ) {
    if ( 'twitch' === $provider_key ) {
        return array(
            'client_id'     => 'YOUR_CLIENT_ID', // Replace with your Twitch client ID
            'client_secret' => 'YOUR_CLIENT_SECRET', // Replace with your Twitch client secret
        );
    }
    return $credentials;
}, 10, 2 );

/**
 * Handle Twitch profile fetching
 */
add_filter( 'digicommerce_social_login_custom_profile', function( $profile, $provider, $access_token ) {
    if ( 'twitch' !== $provider ) {
        return $profile;
    }
    
    // Get Twitch client ID for API calls
    $credentials = apply_filters( 'digicommerce_social_login_provider_credentials', false, 'twitch' );
    if ( ! $credentials || empty( $credentials['client_id'] ) ) {
        throw new Exception( esc_html__( 'Twitch client ID not found.', 'digicommerce-pro' ) );
    }
    
    // Fetch Twitch profile
    $response = wp_remote_get(
        'https://api.twitch.tv/helix/users',
        array(
            'headers' => array(
                'Authorization' => 'Bearer ' . $access_token,
                'Client-Id'     => $credentials['client_id'],
            ),
        )
    );
    
    if ( is_wp_error( $response ) ) {
        throw new Exception( esc_html__( 'Failed to fetch Twitch profile.', 'digicommerce-pro' ) );
    }

    $body = wp_remote_retrieve_body( $response );
    $data = json_decode( $body, true );
    
    if ( isset( $data['error'] ) ) {
        throw new Exception( 
            sprintf( 
                esc_html__( 'Twitch API error: %s', 'digicommerce-pro' ), 
                esc_html( $data['message'] ?? 'Unknown error' ) 
            ) 
        );
    }

    if ( empty( $data['data'] ) || ! isset( $data['data'][0] ) ) {
        throw new Exception( esc_html__( 'No user data received from Twitch.', 'digicommerce-pro' ) );
    }

    $user_data = $data['data'][0];
    
    return array(
        'id'         => $user_data['id'],
        'email'      => $user_data['email'] ?? '',
        'first_name' => '',
        'last_name'  => '',
        'name'       => $user_data['display_name'] ?? $user_data['login'],
        'username'   => $user_data['login'],
        'avatar'     => $user_data['profile_image_url'] ?? '',
    );
}, 10, 3 );

/**
 * Show Twitch only on login form, hide from register form (Don't add this filter if you want to show it on both form)
 */
add_filter( 'digicommerce_social_login_provider_show_on_form', function( $show, $provider_key, $form_type ) {
    if ( 'twitch' === $provider_key && 'register' === $form_type ) {
        return false; // Don't show on register form
    }
    return $show;
}, 10, 3 );

Similar Articles

Back to DigiCommerce