Let people sign up and sign in

What you will build

Every backend starts with knowing who is calling. In this lesson you will turn on built-in authentication for your project, set sensible rules, create a test user and sign in as them. In the next lesson you will use that identity to protect data.

Open Authentication

Open your project in the Console and choose Authentication in the sidebar. The page lists your Project Users, with a Total Users card and a Monthly Active Users (MAUs) counter. A new project has no users yet.

Set the rules

Choose Settings to open the settings window. You will visit three tabs.

1. General. Set Site URL to where your app will live, for example https://notes.example.com. Emails link here. Add any other pages your emails may land on under Allowed redirect URLs, one per line. Leave Allow new sign-ups on. Under Require a verified email before password sign-in choose Required if you want people to confirm their address before they can sign in.
2. Sign-in methods. Keep Email and password on. You can also switch on One-time code and Magic link. At least one must stay on.
3. Passwords. Set Minimum length to 10 and tick Require a number.

Choose Save changes. You should see "Saved." Rules for passwords only affect new passwords.

Tip: Settings are per project. If you later create a staging project, repeat them there.

Test every flow in the Playground

Close the settings and choose Auth Playground. It is a real sign-in against your project, so it creates real accounts. Use a throwaway address you can read.

1. Open Sign up, enter an email and a password that follows your rules, and choose Create account.
2. Try a password that is too short. Notice the message names the rule.
3. If you required verified emails, the new user must confirm first. Open Magic link, choose Show it here (no email sent) and redeem the token to verify and sign in.
4. Open Sign in and choose Authenticate & Generate Session. You should see a session token and its decoded claims, including the user's id.
5. Choose Revoke This Session when you are done.

Back on the Authentication page the user appears in Project Users with Verified or Pending.

Look after a user

Choose Manage on a user. You can Send password reset email, Send one-time code, Send magic link, Mark email verified, Sign out everywhere, or Set a new password. These are what you will use when a customer writes in saying they are locked out.

Connect your app

Your app signs people in with the TypeScript SDK (or the Python, Go and Rust equivalents). Use the publishable key in the browser:

import { createClient } from "@pgb/sdk";
const pgb = createClient("my-project", { key: "pgb_pub_..." });

await pgb.auth.signUp({ email, password });
const login = await pgb.auth.signIn({ email, password });
const user = await pgb.auth.getUser();

If your project requires verified emails, signUp returns no session and the user finishes through the emailed link or token. Your page at <site url>/auth/confirm reads the token from the address and calls pgb.auth.verifyMagicLink({ token }).

Check your understanding

Why would you put the publishable key in a browser app but never the secret key? Because anyone can read what is in a browser. The publishable key can do only what your policies allow. The secret key has full access.

Recap

• Authentication lives under Authentication in your project, with users, a Playground and Settings.
• Settings cover Site URL, redirects, sign-up, sign-in methods, password rules and sessions.
• The Playground tests real flows. Use disposable accounts and revoke sessions.
• Manage gives you support tools for each user.
• Next you will make the database respect who is signed in.