Connect social accounts

Learn how to integrate social media platforms with your users using Snag’s OAuth flow or by passing social handles directly

After creating users and managing user groups, the next step is to connect social media accounts. Snag provides two methods for integrating social accounts: using Snag’s OAuth flow or passing social handles directly.

Overview

Social account integration enables enhanced loyalty features like:

• Social media verification rules
• Cross-platform engagement tracking
• Enhanced user profiles
• Automated social media tasks

Supported Social Platforms

Snag supports connecting the following social platforms:

• Twitter/X - Follow accounts, post tweets, verify bio content
• Discord - Join servers, verify roles, track messages
• Telegram - Join channels, verify messages
• Epic Games - Verify game ownership and achievements
• Steam - Verify game library and wishlist
• Google - Verify email address
• TikTok - Verify TikTok account
• Email - Verify email address

Method 1: Snag OAuth Flow

This method lets Snag handle the entire OAuth process, providing a seamless user experience.

How It Works

1. Generate OAuth URL: Call Snag’s API to get an authentication URL
2. Redirect User: Send the user to the OAuth URL
3. User Authorization: User authorizes the connection on the social platform
4. Callback Handling: Snag redirects back to your application
5. Verification: Confirm the connection was successful

Implementation

Step 1: Generate OAuth URL

cURL

curl -X GET 'https://admin.snagsolutions.io/api/twitter/auth?userId=user-id&redirectUri=https://yourapp.com/callback' \
  -H 'x-api-key: your-api-key-here'

Success

{
  "url": "https://auth-provider.com/oauth/authorize?client_id=xxx&redirect_uri=xxx&state=xxx"
}

Step 2: Redirect User

// Server-side code to initiate the flow
app.get('/connect-twitter', async (req, res) => {
  try {
    const userId = req.query.userId
    const redirectUri = 'https://yourapp.com/callback'

    const response = await fetch(
      `https://admin.snagsolutions.io/api/twitter/auth?userId=${userId}&redirectUri=${redirectUri}`,
      {
        headers: {
          'x-api-key': process.env.SNAG_API_KEY,
        },
      }
    )

    const data = await response.json()

    // Redirect user to the OAuth URL
    res.redirect(data.url)
  } catch (error) {
    console.error('Error connecting Twitter account:', error)
    res.status(500).send('Error connecting Twitter account')
  }
})

Step 3: Handle Callback

// Handle the callback from Snag
app.get('/callback', async (req, res) => {
  const { code, state, userId } = req.query

  try {
    // Verify the connection was successful
    const user = await client.users.getMetadata(userId)

    if (user.twitterUser) {
      res.send('Twitter account connected successfully!')
    } else {
      res.send('Failed to connect Twitter account')
    }
  } catch (error) {
    console.error('Error verifying connection:', error)
    res.status(500).send('Error verifying connection')
  }
})

Client-Side Integration

// Client-side code to initiate the flow
function connectTwitterAccount(userId) {
  // Redirect to your server endpoint
  window.location.href = `/connect-twitter?userId=${userId}`
}

// Example button click handler
document.getElementById('connect-twitter-btn').addEventListener('click', () => {
  connectTwitterAccount('user-123')
})

Method 2: Direct Social Handle Passing

If you control the OAuth flow in your application, you can pass social handles directly to Snag using the metadata endpoint.

Implementation

import SnagSolutions from '@snagsolutions/sdk'

const client = new SnagSolutions({
  apiKey: 'your-api-key-here',
})

// After your OAuth flow completes, update user metadata
const updatedUser = await client.users.createMetadata({
  walletAddress: '0x1234567890abcdef1234567890abcdef12345678',
  twitterUser: 'user_twitter_handle',
  twitterUserId: 'user_twitter_id',
  discordUser: 'user_discord_username',
  discordUserId: 'user_discord_id',
  telegramUsername: 'user_telegram_username',
  telegramUserId: 'user_telegram_id',
})

Example: Custom OAuth Implementation

// Your custom OAuth flow
async function handleTwitterOAuth(code) {
  // Your OAuth implementation
  const twitterData = await exchangeCodeForToken(code)
  const userInfo = await getTwitterUserInfo(twitterData.access_token)

  // Pass the Twitter handle to Snag
  await client.users.createMetadata({
    walletAddress: currentUser.walletAddress,
    twitterUser: userInfo.username,
  })

  console.log('Twitter handle updated in Snag')
}

Platform-Specific Endpoints

Twitter/X

// Generate Twitter OAuth URL
const twitterAuth = await client.social.twitter.auth({
  userId: 'user-id',
  redirectUri: 'https://yourapp.com/callback',
})

Discord

// Generate Discord OAuth URL
const discordAuth = await client.social.discord.auth({
  userId: 'user-id',
  redirectUri: 'https://yourapp.com/callback',
})

Telegram

// Generate Telegram OAuth URL
const telegramAuth = await client.social.telegram.auth({
  userId: 'user-id',
  redirectUri: 'https://yourapp.com/callback',
})

Custom OAuth Applications

Snag allows you to use your own OAuth applications for Twitter, Discord, Epic Games, and Steam integrations. This enables you to maintain your brand identity throughout the authentication flow.

Contact the Snag team for integration support if you want to use your own OAuth applications.

Required Redirect URLs

Add these redirect URLs to your OAuth application:

• https://snag-render.com/api/twitter/auth/callback
• https://snag-render.com/api/discord/auth/callback
• https://snag-render.com/api/epic/auth/callback
• https://snag-render.com/api/steam/auth/callback

Error Handling

Common Issues

OAuth Flow Errors

• Invalid redirect URI: Ensure your redirect URI matches exactly
• Expired authorization: OAuth codes expire quickly, handle them promptly
• User cancellation: Handle cases where users cancel the authorization

Social Handle Conflicts

• Duplicate handles: Check if a social handle is already connected to another user
• Invalid handles: Verify social handles are in the correct format
• Platform-specific errors: Handle platform-specific error responses

Error Handling Example

try {
  const response = await client.social.twitter.auth({
    userId: 'user-id',
    redirectUri: 'https://yourapp.com/callback',
  })

  // Redirect user to OAuth URL
  window.location.href = response.url
} catch (error) {
  if (error.status === 400) {
    console.error('Invalid parameters:', error.message)
  } else if (error.status === 403) {
    console.error('API key invalid or expired')
  } else {
    console.error('Unexpected error:', error)
  }
}

Best Practices

User Experience: Use Snag’s OAuth flow for a seamless experience, or implement your own for complete control.

Error Handling: Always handle OAuth errors gracefully and provide clear feedback to users.

Security: Never expose API keys in client-side code. Always handle OAuth flows server-side.

Rate Limits: Be mindful of API rate limits when processing multiple social connections.

Integration with Loyalty Rules

Once social accounts are connected, they can be used in loyalty rules:

• Twitter Follow: Verify users follow specific accounts
• Discord Role: Check if users have specific server roles
• Telegram Join: Verify users joined specific channels
• Social Verification: Use social accounts as proof of identity

For detailed information on social account management, see our Managing Social Accounts guide.

Next Steps

Now that you can connect social accounts, you’re ready to:

Create Loyalty Rules

Start building loyalty programs with social media integration.