Hosted Auth Pages

Tribe’s hosted pages give you a fully functional authentication flow without building any forms. Login, registration, email verification, password reset, magic links, all of it works out of the box. Your app simply redirects users to these pages and receives them back once they’ve authenticated.

With Agents

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

/tribe Add Tribe authentication to my app using hosted login pages

Copy

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

How it works

1. Your app calls redirectToLogin(), which sends the user over to Tribe’s hosted login page
2. The user authenticates through whichever method they prefer (email and password, social login, or magic link)
3. On success, Tribe redirects them back to your app with a session token embedded in the URL
4. The SDK picks up the token automatically, stores it in localStorage, and cleans the URL so nothing looks out of place

You don’t need to write any token-handling code. After the redirect, calling getSession() returns the authenticated user just as you’d expect.

Basic setup

Script Tag

<script src="https://api.tribe.utopian.build/sdk.js?site=YOUR_SITE_ID" defer></script>
<script defer>
  window.addEventListener("DOMContentLoaded", async () => {
    const session = await Tribe.getSession();
    if (!session) {
      Tribe.redirectToLogin();
      return;
    }
    // User is authenticated
    showApp(session.user);
  });
</script>

React

import { Tribe } from "@tribecloud/sdk";
import { createContext, useContext, useEffect, useState } from "react";

const tribe = new Tribe({ siteId: "YOUR_SITE_ID" });

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    tribe.getSession().then((session) => {
      if (!session) {
        tribe.redirectToLogin();
        return;
      }
      setUser(session.user);
      setLoading(false);
    });
  }, []);

  const logout = async () => {
    await tribe.logout();
    tribe.redirectToLogin();
  };

  if (loading) return null;

  return (
    <AuthContext.Provider value={{ user, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

Custom redirect URL

By default, Tribe sends users back to whichever page they came from. You can override the redirect target if you’d rather land them somewhere specific:

tribe.redirectToLogin({ redirectUrl: "https://myapp.com/dashboard" });
tribe.redirectToRegister({ redirectUrl: "https://myapp.com/onboarding" });

Hosted pages available

Page	URL	Purpose
Login	/auth/login	Sign in with email and password, magic link, or social providers
Register	/auth/register	Create a new account
Verify Email	/auth/verify?token=xxx	Confirm an email address (linked from the verification email Tribe sends)
Forgot Password	/auth/forgot-password	Request a password reset email
Reset Password	/auth/reset-password?token=xxx	Choose a new password after receiving the reset email
Magic Link	/auth/magic-link?token=xxx	Verify the magic link token and redirect the user into your app

Social login on hosted pages

If you’ve enabled any social login providers (Google, GitHub, Discord, Twitter) in your site’s Auth settings, the hosted pages automatically display the corresponding buttons. No additional wiring on your end.

Note

Tribe manages OAuth credentials centrally, so you don’t need to register separate applications with Google, GitHub, or any other provider. Just toggle them on or off in the dashboard.

Organization SSO

When your site belongs to a Tribe organization, redirectToLogin() checks whether the user already has a session from another site in the same org. If they do, they’re signed in seamlessly without seeing a login form. That’s how single sign-on works across Tribe organizations.

When to use hosted pages vs. custom UI

	Hosted Pages	Custom UI
Setup time	Minutes	Hours
Custom design	No	Yes
Social login	Automatic	You build the buttons
Email verification	Handled	You build the pages
Password reset	Handled	You build the pages

If you need full control over how authentication looks and feels, head over to the Custom Login UI guide.