Social Login (OAuth)

Let users sign in with Google, GitHub, or Discord instead of creating a password. Social login reduces friction and increases signups.

Why Use Social Login

• Easier for users - One click to sign in
• Fewer passwords - Less friction, more signups
• Verified emails - Social providers verify emails for you
• More secure - Leverage Google/GitHub security

Accessing OAuth Settings

1. Go to Admin > Settings
2. Click the Connections tab
3. You'll see options for each provider

Google Setup

Step 1: Create Google Cloud Project

1. Go to Google Cloud Console
2. Click Create Project
3. Enter a project name (e.g., "Votlie Login")
4. Click Create

Step 2: Enable Google+ API

1. Go to APIs & Services > Library
2. Search for "Google+ API"
3. Click Enable

Step 3: Create OAuth Credentials

1. Go to APIs & Services > Credentials
2. Click Create Credentials > OAuth Client ID
3. If asked, configure the consent screen first:
   • Choose External
   • Fill in app name and email
   • Add your domain to authorized domains
4. For Application Type, select Web Application
5. Add Authorized Redirect URI:

https://yourdomain.com/auth/google/callback

6. Click Create
7. Copy your Client ID and Client Secret

Step 4: Configure in Votlie

1. Go to Admin > Settings > Connections
2. Find Google
3. Enter your Client ID
4. Enter your Client Secret
5. Toggle Enable Google Login on
6. Click Save

GitHub Setup

Step 1: Create GitHub OAuth App

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

Step 2: Configure in Votlie

1. Go to Admin > Settings > Connections
2. Find GitHub
3. Enter your Client ID
4. Enter your Client Secret
5. Toggle Enable GitHub Login on
6. Click Save

Discord Setup

Step 1: Create Discord Application

1. Go to Discord Developer Portal
2. Click New Application
3. Enter a name and click Create
4. Go to OAuth2 in the sidebar
5. Add Redirect URL:

https://yourdomain.com/auth/discord/callback

6. Copy your Client ID (from General Information)
7. Go to OAuth2 and copy your Client Secret

Step 2: Configure in Votlie

1. Go to Admin > Settings > Connections
2. Find Discord
3. Enter your Client ID
4. Enter your Client Secret
5. Toggle Enable Discord Login on
6. Click Save

Slack Setup

Step 1: Create Slack App

1. Go to Slack API
2. Click Create New App
3. Choose From scratch
4. Enter an app name and select your workspace
5. Click Create App

Step 2: Configure OAuth

1. Go to OAuth & Permissions in the sidebar
2. Add a Redirect URL:

https://yourdomain.com/auth/slack/callback

3. Under Scopes, add the identity.basic, identity.email, and identity.avatar user scopes
4. Go to Basic Information
5. Copy your Client ID and Client Secret

Step 3: Configure in Votlie

1. Go to Admin > Settings > Connections
2. Find Slack
3. Enter your Client ID
4. Enter your Client Secret
5. Toggle Enable Slack Login on
6. Click Save

Testing OAuth

After setting up:

1. Open your site in a new browser (or incognito)
2. Click Login
3. You should see the social login buttons
4. Click one to test
5. Complete the login with the provider
6. You should be redirected back and logged in

Callback URL

The callback URL must match exactly what you enter in the provider's settings.

Format:

https://yourdomain.com/auth/{provider}/callback

Examples:

• Google: https://yourdomain.com/auth/google/callback
• GitHub: https://yourdomain.com/auth/github/callback
• Discord: https://yourdomain.com/auth/discord/callback
• Slack: https://yourdomain.com/auth/slack/callback

How Social Login Works

Understanding how social login interacts with user accounts:

• New users: When a user signs in with a social provider for the first time and no account exists, a new account is automatically created using the email address from the social provider. The email is marked as verified since the provider has already confirmed it.
• Existing users: If the email returned by the social provider matches an existing account, the social login is automatically linked to that account. The user can then sign in using either method.
• Multiple providers: Users can connect multiple social accounts (e.g., both Google and GitHub) to a single Votlie account. Any connected provider can be used to sign in.

Rate Limiting

OAuth login attempts are rate-limited to 10 per minute per IP address to prevent abuse.

Troubleshooting

Google-Specific Issues

• App not verified: For testing, add your email as a test user in Google Console
• Consent screen: Make sure you've configured the OAuth consent screen

GitHub-Specific Issues

• Callback URL mismatch: GitHub is strict - ensure exact match

User Experience

When social login is enabled:

• Users see "Continue with Google/GitHub/Discord" buttons on login page
• Clicking redirects them to the provider
• After approval, they're logged in automatically
• If their email matches an existing account, accounts are linked

Connecting Accounts

Users with existing accounts can connect social logins:

1. User goes to Settings > Connections
2. Clicks Connect next to a provider
3. Completes the OAuth flow
4. Account is now linked

They can use either password or social login afterwards.

Disconnecting Accounts

Users can remove a social connection:

1. Go to Settings > Connections
2. Click Disconnect next to the provider
3. Confirm

Tips

Next Steps

• Email Setup - Configure email notifications
• User Management - Manage users who sign up