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.

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

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

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.

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>
  );
}