Magic Links

Magic links offer a passwordless login experience. The user types their email, receives a link, clicks it, and they’re in. No password to remember, no credentials to manage. Tribe sends the email and verifies the token, so your job is just to request the link and process the result.

Magic links are also the primary recovery mechanism for password users. Since email/password auth is pseudonymous (the email is never stored), a user who forgets their password can request a magic link to regain access. Like all auth methods, magic link is also fully pseudonymous — the email is used transiently to send the link but is never stored.

With Agents

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

/tribe Add magic link login to my app using Tribe

Copy

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

Enable magic links

Magic links are enabled by default for new sites. You can toggle them in the dashboard:

1. Go to the Tribe dashboard
2. Open your site’s Settings → Auth
3. Toggle Magic Links on or off

Check if magic links are enabled

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

const config = await tribe.getAuthConfig();
if (config.magicLinkEnabled) {
  // Show magic link form
}

Request a magic link

await tribe.requestMagicLink("[email protected]");

This sends the user an email containing a login link. When they click it, they’re taken to a verification page where the token in the URL gets validated.

Custom redirect URL

You can control where the magic link points by passing a custom URL:

await tribe.requestMagicLink("[email protected]", {
  magicLinkUrl: "https://myapp.com/magic-login",
});

Verify the magic link

When the user arrives at your magic link page, extract the token from the URL and pass it to the SDK for verification:

npm

// On your /magic-login?token=xxx page
const token = new URLSearchParams(window.location.search).get("token");
if (token) {
  const { user } = await tribe.verifyMagicLink(token);
  // User is now logged in
  window.location.href = "/dashboard";
}

Script Tag

<script src="https://api.tribe.utopian.build/sdk.js?site=YOUR_SITE_ID" defer></script>
<script defer>
  window.addEventListener("DOMContentLoaded", async () => {
    const token = new URLSearchParams(window.location.search).get("token");
    if (token) {
      const { user } = await Tribe.verifyMagicLink(token);
      window.location.href = "/dashboard";
    }
  });
</script>

Using hosted pages instead

If you’re already using hosted auth pages, you can skip building a verification page entirely. The hosted page at /auth/magic-link?token=xxx validates the token and redirects the user back into your app automatically.

Recovery for password users

Password users who forget their credentials have two recovery options:

• Password reset — the traditional flow. The user enters their email, receives a reset link, and sets a new password. Use tribe.forgotPassword() to initiate this. See password reset for details.
• Magic link — the passwordless alternative. The user enters their email, receives a magic link, and clicking it signs them into their existing account directly.

Both flows work the same way under the hood: the system verifies that the provided email computes to the correct pseudonymous ID, then sends a branded email. No email is stored at any point — the account remains fully pseudonymous.

Note

From the SDK’s perspective, the magic link recovery flow is identical to a normal magic link login. No special API calls are needed. For password reset, use tribe.forgotPassword() and tribe.resetPassword().

React example

function MagicLinkForm() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const [error, setError] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await tribe.requestMagicLink(email);
      setSent(true);
    } catch (err) {
      setError(err.message);
    }
  };

  if (sent) return <p>Check your email for a login link!</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
      />
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button type="submit">Send Magic Link</button>
    </form>
  );
}