Flowless

Appearance

Social Authentication Setup ​

Configure OAuth 2.0 social authentication providers for your Flowless instance to enable login with Google, Facebook, GitHub, and more.

Overview ​

Flowless supports social authentication (OAuth 2.0) with popular providers:

  • ✅ Google
  • ✅ Facebook
  • ✅ GitHub
  • ✅ Twitter
  • ✅ LinkedIn
  • ✅ Custom OAuth 2.0 providers

Benefits of Social Auth ​

  • Faster Registration: Users can sign up in one click
  • Better Security: No password to remember or manage
  • Higher Conversion: Reduces friction in signup process
  • Verified Emails: Social providers verify email addresses
  • Profile Data: Get user's name, picture, and email automatically

General Setup Process ​

For each provider, you'll need to:

  1. Create an app in the provider's developer console
  2. Get Client ID and Client Secret
  3. Configure redirect URI
  4. Add credentials to Flowless
  5. Enable the provider

Google OAuth Setup ​

Step 1: Create Google OAuth App ​

  1. Go to Google Cloud Console
  2. Create a new project or select existing
  3. Navigate to APIs & Services → Credentials
  4. Click Create Credentials → OAuth 2.0 Client ID
  5. Select Web application
  1. Go to OAuth consent screen
  2. Select External user type
  3. Fill in app information:
    • App name: Your app name
    • User support email: Your email
    • Developer contact: Your email
  4. Add scopes:
    • userinfo.email
    • userinfo.profile
  5. Save and continue

Step 3: Get Credentials ​

  1. Go back to Credentials
  2. Create OAuth 2.0 Client ID
  3. Add authorized redirect URIs:
    https://your-instance.pubflow.com/auth/social/google/callback
  4. Copy Client ID and Client Secret

Step 4: Add to Flowless ​

  1. Go to Pubflow Dashboard → Your Instance → Settings → Social Auth
  2. Enable Google
  3. Enter:
    • Client ID: Your Google Client ID
    • Client Secret: Your Google Client Secret
  4. Save

Facebook OAuth Setup ​

Step 1: Create Facebook App ​

  1. Go to Facebook Developers
  2. Click My Apps → Create App
  3. Select Consumer app type
  4. Fill in app details

Step 2: Configure Facebook Login ​

  1. Add Facebook Login product
  2. Go to Settings → Basic
  3. Add App Domains: your-instance.pubflow.com
  4. Copy App ID and App Secret

Step 3: Configure OAuth Redirect ​

  1. Go to Facebook Login → Settings
  2. Add Valid OAuth Redirect URIs:
    https://your-instance.pubflow.com/auth/social/facebook/callback
  3. Save changes

Step 4: Add to Flowless ​

  1. Go to Pubflow Dashboard → Social Auth
  2. Enable Facebook
  3. Enter:
    • App ID: Your Facebook App ID
    • App Secret: Your Facebook App Secret
  4. Save

GitHub OAuth Setup ​

Step 1: Create GitHub OAuth App ​

  1. Go to GitHub 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://your-instance.pubflow.com/auth/social/github/callback
  4. Click Register application

Step 2: Get Credentials ​

  1. Copy Client ID
  2. Generate Client Secret
  3. Copy Client Secret

Step 3: Add to Flowless ​

  1. Go to Pubflow Dashboard → Social Auth
  2. Enable GitHub
  3. Enter:
    • Client ID: Your GitHub Client ID
    • Client Secret: Your GitHub Client Secret
  4. Save

Twitter OAuth Setup ​

Step 1: Create Twitter App ​

  1. Go to Twitter Developer Portal
  2. Create a new project and app
  3. Go to App Settings → User authentication settings
  4. Enable OAuth 2.0

Step 2: Configure OAuth ​

  1. Set Type of App: Web App
  2. Add Callback URI:
    https://your-instance.pubflow.com/auth/social/twitter/callback
  3. Add Website URL: https://yourdomain.com
  4. Copy Client ID and Client Secret

Step 3: Add to Flowless ​

  1. Go to Pubflow Dashboard → Social Auth
  2. Enable Twitter
  3. Enter:
    • Client ID: Your Twitter Client ID
    • Client Secret: Your Twitter Client Secret
  4. Save

LinkedIn OAuth Setup ​

Step 1: Create LinkedIn App ​

  1. Go to LinkedIn Developers
  2. Click Create app
  3. Fill in app details
  4. Verify your app

Step 2: Configure OAuth ​

  1. Go to Auth tab
  2. Add Redirect URLs:
    https://your-instance.pubflow.com/auth/social/linkedin/callback
  3. Request Sign In with LinkedIn product
  4. Copy Client ID and Client Secret

Step 3: Add to Flowless ​

  1. Go to Pubflow Dashboard → Social Auth
  2. Enable LinkedIn
  3. Enter:
    • Client ID: Your LinkedIn Client ID
    • Client Secret: Your LinkedIn Client Secret
  4. Save

Custom OAuth Provider ​

Step 1: Configure Custom Provider ​

  1. Go to Pubflow Dashboard → Social Auth → Custom Provider
  2. Click Add Custom Provider
  3. Fill in:
    • Provider Name: e.g., "MyProvider"
    • Authorization URL: https://provider.com/oauth/authorize
    • Token URL: https://provider.com/oauth/token
    • User Info URL: https://provider.com/oauth/userinfo
    • Client ID: Your client ID
    • Client Secret: Your client secret
    • Scopes: email profile

Step 2: Configure Redirect URI ​

Add this redirect URI to your OAuth provider:

https://your-instance.pubflow.com/auth/social/custom/callback

Testing Social Auth ​

Test Login Flow ​

  1. Go to your app's login page
  2. Click "Login with Google" (or other provider)
  3. Authorize the app
  4. Verify you're logged in
  5. Check user data is correct

Test via API ​

bash
# Initiate OAuth flow
curl https://your-instance.pubflow.com/auth/social/google

# This will redirect to Google's OAuth page
# After authorization, user is redirected back with session_id

Frontend Implementation ​

React Example ​

typescript
function SocialLogin() {
  const handleGoogleLogin = () => {
    window.location.href = `${FLOWLESS_URL}/auth/social/google`;
  };

  const handleFacebookLogin = () => {
    window.location.href = `${FLOWLESS_URL}/auth/social/facebook`;
  };

  const handleGitHubLogin = () => {
    window.location.href = `${FLOWLESS_URL}/auth/social/github`;
  };

  return (
    <div>
      <button onClick={handleGoogleLogin}>
        Login with Google
      </button>
      <button onClick={handleFacebookLogin}>
        Login with Facebook
      </button>
      <button onClick={handleGitHubLogin}>
        Login with GitHub
      </button>
    </div>
  );
}

Handling Callback ​

After successful OAuth, Flowless redirects to your app with session_id:

https://yourdomain.com/auth/callback?session_id=ses_xyz123&user_id=usr_abc456
typescript
// In your callback page
useEffect(() => {
  const params = new URLSearchParams(window.location.search);
  const sessionId = params.get('session_id');
  const userId = params.get('user_id');

  if (sessionId) {
    localStorage.setItem('session_id', sessionId);
    window.location.href = '/dashboard';
  }
}, []);

Account Linking ​

Users can link multiple social accounts to one Flowless account:

bash
POST /auth/social/link
Headers: X-Session-ID: ses_xyz123
Body: {
  "provider": "google",
  "access_token": "google_access_token"
}
bash
DELETE /auth/social/unlink/google
Headers: X-Session-ID: ses_xyz123

Security Considerations ​

State Parameter ​

Flowless automatically includes a state parameter to prevent CSRF attacks.

Scope Limitations ​

Only request necessary scopes:

  • ✅ email, profile - Essential
  • ❌ contacts, calendar - Unnecessary

Token Storage ​

  • Social access tokens are stored securely
  • Refresh tokens are encrypted
  • Tokens are never exposed to frontend

Troubleshooting ​

"Redirect URI mismatch" ​

  • Verify redirect URI in provider console matches exactly:
    https://your-instance.pubflow.com/auth/social/{provider}/callback

"Invalid client ID" ​

  • Double-check Client ID and Client Secret
  • Ensure no extra spaces
  • Regenerate credentials if needed

"App not verified" ​

  • Some providers require app verification for production
  • Submit app for review in provider console

Next Steps ​