Social Login

Your users already have accounts with Google, GitHub, Discord, and Twitter. Social login lets them use those existing identities to sign into your app with a single click rather than creating yet another set of credentials. The full OAuth dance is handled for you, so the integration boils down to one method call.

With Agents

Install the Tribe skill in Claude Code, Codex, or any AI coding agent, then just ask:

/tribe Add Google and GitHub social login buttons to my app using Tribe

Copy

The agent will generate all the code for you, tailored to your stack.

How it works

1. Your app calls redirectToSocialLogin("google"), which takes the user to Google’s consent screen
2. The user grants permission
3. Tribe’s server receives the OAuth callback and creates a session
4. The user bounces back to your app with a ?tribe_token= parameter in the URL
5. The SDK detects the token automatically, so getSession() returns the authenticated user from that point on

Note

Tribe manages OAuth credentials centrally. You don’t need to register apps with Google, GitHub, Discord, or Twitter, just toggle providers on or off in the Tribe dashboard.

Enable social providers

1. Go to the Tribe dashboard
2. Open your site’s Settings → Auth → Social Login
3. Toggle on the providers you want

Check which providers are enabled

It’s good practice to check which providers are active before rendering buttons so your UI stays in sync with your dashboard configuration:

import { Tribe } from "@tribecloud/sdk";

const config = await tribe.getAuthConfig();
// config.googleEnabled, config.githubEnabled, config.discordEnabled, config.twitterEnabled

Add social login buttons

React

function SocialLoginButtons() {
  const [config, setConfig] = useState(null);

  useEffect(() => {
    tribe.getAuthConfig().then(setConfig);
  }, []);

  if (!config) return null;

  const providers = [
    { key: "google", label: "Google", enabled: config.googleEnabled },
    { key: "github", label: "GitHub", enabled: config.githubEnabled },
    { key: "discord", label: "Discord", enabled: config.discordEnabled },
    { key: "twitter", label: "X (Twitter)", enabled: config.twitterEnabled },
  ].filter((p) => p.enabled);

  return (
    <div>
      {providers.map(({ key, label }) => (
        <button key={key} onClick={() => tribe.redirectToSocialLogin(key)}>
          Continue with {label}
        </button>
      ))}
    </div>
  );
}

Vanilla JS

<div id="social-buttons"></div>

<script src="https://api.tribe.utopian.build/sdk.js?site=YOUR_SITE_ID" defer></script>
<script defer>
  window.addEventListener("DOMContentLoaded", async () => {
    const config = await Tribe.getAuthConfig();
    const providers = [
      { key: "google", label: "Google", enabled: config.googleEnabled },
      { key: "github", label: "GitHub", enabled: config.githubEnabled },
      { key: "discord", label: "Discord", enabled: config.discordEnabled },
      { key: "twitter", label: "X (Twitter)", enabled: config.twitterEnabled },
    ].filter((p) => p.enabled);

    const container = document.getElementById("social-buttons");
    providers.forEach(({ key, label }) => {
      const btn = document.createElement("button");
      btn.textContent = `Continue with ${label}`;
      btn.addEventListener("click", () => Tribe.redirectToSocialLogin(key));
      container.appendChild(btn);
    });
  });
</script>

Custom redirect URL

After authentication, users normally land back on whichever page initiated the social login. You can point them somewhere else by passing a redirect URL:

tribe.redirectToSocialLogin("google", { redirectUrl: "https://myapp.com/dashboard" });

Privacy model

Social login is privacy-preserving by design. Rather than storing the user’s real identity from the provider, the server computes a one-way hash from the provider’s user ID:

pseudonymousId = SHA256("google" + ":" + googleUserId + ":" + siteSalt)

The actual email and identity from the social provider are never persisted. After social login, a user’s session looks like this:

• user.email → null
• user.pseudonymousId → stable hashed identifier
• user.authMethod → "google", "github", "discord", or "twitter"

Tips

• Use redirectToSocialLogin() directly when you want social login without an intermediate step. Routing through hosted auth pages works too, but it adds an extra redirect that users don’t need.
• If you’re already using hosted auth pages, social login buttons appear automatically whenever providers are enabled in the dashboard. No extra code required.
• First-time social login users are registered automatically. There’s no separate sign-up step for them.
• Because pseudonymous users have no email on file, there’s no way to do email-based account recovery. It’s worth prompting them to link a backup auth method right after their first login, so a lost social account doesn’t mean a lost Tribe account.