Sign-in links

A sign-in link (also called a magic link) is a one-click way in. The person gives their email, Pawabase sends a link, and clicking it signs them in on your site. There is no password to remember or leak.

In Studio

Users & auth → Sign-in → Sign-in & registration → Ways to sign in → Sign-in link. It is on by default. Make sure your site’s address is on the redirect list, since the link must return somewhere. Change the wording under Email templates → Sign-in link.

Request a link

await pawabase.auth.signInWithMagicLink({
  email: "ada@example.com",
  redirectTo: "https://myapp.com/auth/callback",
  createUser: true,
});

pb.auth.sign_in_with_magic_link(
    email="ada@example.com",
    redirect_to="https://myapp.com/auth/callback",
    create_user=True,
)

createUser decides what happens for an address with no account: create one (the default), or do nothing. Pass false for an app where only existing people may sign in. In either case the call returns without saying whether the address exists.

Finish on the landing page

In a browser, nothing more is needed: the client reads the session from the address when your page loads, stores it, cleans the address and fires SIGNED_IN. When you handle the link yourself (a server, or a mobile deep link), pass the token from the link:

const token = new URL(window.location.href).searchParams.get("token")!;
const result = await pawabase.auth.verifyMagicLink(token);

if (result.status === "mfa_required") await result.verify(codeFromUser);

result = pb.auth.verify_magic_link(token)
if result.status == "mfa_required":
    result.verify(code_from_user)

A complete page

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

  async function request() {
    await pawabase.auth.signInWithMagicLink({ email, redirectTo: `${location.origin}/` });
    setSent(true);
  }

  return sent ? (
    <p>We sent a link to {email}. It works once, so open it on this device.</p>
  ) : (
    <>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <button onClick={request}>Email me a link</button>
    </>
  );
}

Things to know

A link works once and expires. If it fails, show “this link has expired” with a button to send a new one.
It signs the person in on the device that opens it. Email apps that open links in an internal browser can confuse people; that is when codes are better.
Opening the link proves the inbox is theirs, so the address becomes verified.
If the account has two-step verification, the link leads to mfa_required like any other first step.

Troubleshooting

Symptom	Cause
No email arrives	Check spam; check the mail log for a failed send; check the sending address
The link opens the wrong page	`redirectTo` missing or not on the redirect list
”Link already used”	Corporate email scanners may open links first. Use codes for those users
Works on desktop, not in-app browsers	Use codes

Email codes

The no-link alternative.

Redirect URLs

Where links return.

Getting started

Sign-in methods

Sign-up

Security

People

Developers

In Studio

Request a link

Finish on the landing page

A complete page

Things to know

Troubleshooting

Email codes

Redirect URLs

​In Studio

​Request a link

​Finish on the landing page

​A complete page

​Things to know

​Troubleshooting

Email codes

Redirect URLs

In Studio

Request a link

Finish on the landing page

A complete page

Things to know

Troubleshooting