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
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
Method 1: Snag OAuth Flow
This method lets Snag handle the entire OAuth process, providing a seamless user experience.
How It Works
Generate OAuth URL : Call Snag’s API to get an authentication URL
Redirect User : Send the user to the OAuth URL
User Authorization : User authorizes the connection on the social platform
Callback Handling : Snag redirects back to your application
Verification : Confirm the connection was successful
Implementation
Step 1: Generate OAuth URL
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'
{
"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' )
}
// 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
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
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
Next Steps
Now that you can connect social accounts, you’re ready to:
Create Loyalty Rules Start building loyalty programs with social media integration.