Purchase Now

Social Login Setup

Configure Google, Facebook and Twitter OAuth authentication to allow users to sign in with their social accounts.

Optional Feature

Social login is optional. Users can always register and log in with email/password. Enable social login to provide a faster signup experience.

Supported Providers

CoinTrail supports the following social login providers:

Google

Allow users to sign in with their Google account. Most popular and recommended option.

Facebook

Allow users to sign in with their Facebook account. Requires a Facebook App.

Twitter/X

Allow users to sign in with their Twitter/X account. Requires a Twitter Developer App.

Enabling/Disabling Social Login

You can enable or disable social login globally from the admin panel:

Access Feature Settings

  1. Go to Admin Panel > Settings > Features
  2. Find the Enable Social Login toggle
  3. Toggle it ON to enable social login, or OFF to disable
  4. Click Save
Screenshot: Admin Feature Settings showing the Enable Social Login toggle admin/settings/feature-social-login-toggle.png

Feature Settings - Enable or disable social login for the entire site

Note

When social login is disabled, the social login buttons will be completely hidden from the login and registration pages. Users will only see the email/password form.

Google Login Setup

Recommended

Google is the most popular social login option. Most users have a Google account and are familiar with Google's sign-in flow.

Create a Google Cloud Project

  1. Go to Google Cloud Console
  2. Click Select a project at the top, then New Project
  3. Enter a project name (e.g., "CoinTrail")
  4. Click Create

Configure OAuth Consent Screen

  1. In the Google Cloud Console, go to APIs & Services > OAuth consent screen
  2. Select External user type (unless you're using Google Workspace)
  3. Click Create
  4. Fill in the required fields:
    • App name: Your site name (e.g., "CoinTrail")
    • User support email: Your email
    • Developer contact email: Your email
  5. Click Save and Continue
  6. On the Scopes page, click Add or Remove Scopes
  7. Select email and profile scopes
  8. Click Save and Continue

Create OAuth Credentials

  1. Go to APIs & Services > Credentials
  2. Click + Create Credentials at the top
  3. Select OAuth client ID
  4. Choose Web application as the application type
  5. Enter a name (e.g., "CoinTrail Web")
  6. Under Authorized JavaScript origins, add:
URL 
https://yourdomain.com
  1. Under Authorized redirect URIs, add:
URL 
https://yourdomain.com/user/login/google/callback
  1. Click Create

Get Client ID and Secret

  1. After creating the credentials, a popup will show your Client ID and Client Secret
  2. Copy both values (you can also find them later in Credentials > OAuth 2.0 Client IDs)

Publish the App (Important!)

  1. Go back to APIs & Services > OAuth consent screen
  2. Under "Publishing status", click Publish App
  3. Confirm by clicking Confirm
Important

While in "Testing" mode, only users you've added as test users can use Google login. You must publish the app for all users to be able to sign in.

Configure CoinTrail

Option 1: Using .env file

Add the following to your .env file:

.env 
# Google OAuth
GOOGLE_CLIENT_ID=your_client_id_here
GOOGLE_CLIENT_SECRET=your_client_secret_here
GOOGLE_REDIRECT_URL=https://yourdomain.com

Option 2: Using Admin Panel

You can also configure Google OAuth from the admin panel:

  1. Go to Admin Panel > Settings > Third Party
  2. Find the Social Login OAuth section
  3. Enter your Google Client ID and Client Secret
  4. Click Save

Facebook Login Setup

Create a Facebook App

  1. Go to Facebook Developers
  2. Click My Apps in the top right corner
  3. Click Create App
  4. Select "Consumer" as the app type
  5. Enter your app name (e.g., "CoinTrail Login")
  6. Click Create App

Configure Facebook Login Product

  1. In your app dashboard, click Add Product
  2. Find Facebook Login and click Set Up
  3. Select Web as the platform
  4. Enter your website URL: https://yourdomain.com
  5. Click Save

Configure OAuth Settings

  1. Go to Facebook Login > Settings
  2. In Valid OAuth Redirect URIs, add:
URL 
https://yourdomain.com/user/login/facebook/callback
  1. Enable Login with the JavaScript SDK
  2. Click Save Changes

Get App Credentials

  1. Go to Settings > Basic
  2. Copy your App ID and App Secret
  3. Fill in required fields (Privacy Policy URL, Terms of Service URL)
  4. Set App Mode to Live (when ready for production)

Configure CoinTrail

Add the following to your .env file:

.env 
# Facebook OAuth
FB_CLIENT_ID=your_app_id_here
FB_SECRET_ID=your_app_secret_here
FB_REDIRECT_URL=https://yourdomain.com
Important

The FB_REDIRECT_URL must match your site URL exactly (including https). Do not include a trailing slash.

Twitter/X Login Setup

Create a Twitter Developer Account

  1. Go to Twitter Developer Portal
  2. Sign in with your Twitter account
  3. Apply for a developer account if you haven't already
  4. Complete the application form describing your use case
Approval Process

Twitter developer account approval may take a few hours to a few days. You'll receive an email when approved.

Create a Twitter App

  1. In the Developer Portal, go to Projects & Apps
  2. Click + Add App or Create App
  3. Enter your app name (e.g., "CoinTrail")
  4. Click Complete

Configure User Authentication

  1. Go to your app's Settings tab
  2. Scroll to User authentication settings
  3. Click Set up
  4. Configure the following:
    • App permissions: Read
    • Type of App: Web App, Automated App or Bot
    • Callback URI:
URL 
https://yourdomain.com/user/login/twitter/callback
  1. Add your Website URL: https://yourdomain.com
  2. Click Save

Get API Keys

  1. Go to Keys and Tokens tab
  2. Under Consumer Keys, copy:
    • API Key (Client ID)
    • API Key Secret (Client Secret)

Configure CoinTrail

Add the following to your .env file:

.env 
# Twitter/X OAuth
TW_CLIENT_ID=your_api_key_here
TW_SECRET_ID=your_api_key_secret_here
TW_REDIRECT_URL=https://yourdomain.com

Complete .env Configuration

Here's a complete example of all social login environment variables:

.env 
# ================================
# Social Login Configuration
# ================================

# Google OAuth
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_REDIRECT_URL=https://yourdomain.com

# Facebook OAuth
FB_CLIENT_ID=your_facebook_app_id
FB_SECRET_ID=your_facebook_app_secret
FB_REDIRECT_URL=https://yourdomain.com

# Twitter/X OAuth
TW_CLIENT_ID=your_twitter_api_key
TW_SECRET_ID=your_twitter_api_secret
TW_REDIRECT_URL=https://yourdomain.com

Testing Social Login

Before going live, test your social login integration:

  1. Open an incognito/private browser window
  2. Go to your site's login page
  3. Click the Google, Facebook or Twitter login button
  4. You should be redirected to the provider's authorization page
  5. After authorizing, you should be redirected back and logged in

Troubleshooting

Common Issues

Issue Solution
"Redirect URI mismatch" error Ensure the callback URL in your provider settings exactly matches your site URL (including https and no trailing slash).
Google: "Access blocked: This app's request is invalid" Make sure the redirect URI in Google Cloud Console matches exactly: https://yourdomain.com/user/login/google/callback
Google: Only test users can sign in Go to OAuth consent screen and click "Publish App" to move from Testing to Production mode.
"App not set up" error on Facebook Make sure your Facebook app is in Live mode (not Development mode) and all required fields are filled.
Twitter login fails silently Check that your Twitter app has the correct callback URL and that User Authentication is properly configured.
Social login buttons not showing Verify that social login is enabled in Admin Panel > Settings > Features and that the .env variables are correctly set.
"Invalid API key" error Double-check that you've copied the correct API keys to your .env file without any extra spaces.
Debug Mode

If you're having issues, temporarily set APP_DEBUG=true in your .env file to see detailed error messages. Remember to set it back to false for production.

File Structure reCAPTCHA Setup