How to add sign-up and login to your site

In TeleportHQ, you add sign-up and login with Authentication. In the editor, click the padlock button Authentication at the top left of the canvas, then follow the Activate Authentication steps. TeleportHQ creates the sign-in, sign-up, forgot password, reset password and profile pages, keeps the accounts in a database, and adds the welcome and password reset emails. After you publish, visitors can create accounts on your site.

Before you start#

• Authentication makes your project a web app. On a website, TeleportHQ first opens a window titled Enable Web App features?. Nothing changes until you click Enable Web App features; Keep as a Presentation Website cancels. A web app's code can't be downloaded, and it needs a Web App slot to keep publishing after 7 days. TeleportHQ saves a backup named Before Web App features Enabled first, so you can go back. A project that is still blank (an empty home page and no components) gets no backup, because there is nothing in it to restore. See What is a web app in TeleportHQ? and Why does my web app need a slot, and what is the 7-day window?.
• A database. User accounts are stored in a database. You can use the built-in TeleportHQ database or one of your own.
• Be online. The Authentication button is greyed out while the editor is offline.

Steps#

1. Start the activation#

1. Open your project in the TeleportHQ editor.

2. At the top left of the canvas, click the padlock button Authentication (tooltip "Enable authentication").

   

3. If your project is a website, the Enable Web App features? window opens. Click Enable Web App features.
4. The Activate Authentication window lists What will happen:. Click Continue.

You can also start from the left sidebar:

1. Click Plugins (the four-squares icon above Growth), then the Authentication row. It shows Off. Its settings open in a drawer beside the list.
2. Under Feature, turn on the Authentication enabled switch. On a website the Enable Web App features? window opens first, then the Activate Authentication window, as in steps 3 and 4 above.

2. Choose the database#

1. Under Select Database Type, the TeleportHQ database card ("Managed by TeleportHQ") is selected. Keep it, or click one of your own data sources. To connect a new one, click Create New Data Source.
2. Click Continue.

If your project already has a database for another feature (for example, a store), TeleportHQ uses it and skips this step.

3. Create your first admin account (optional)#

1. Admin Email starts with admin@example.com. Replace it with your own address, for example owner@mybakery.com.
2. In Admin Password and Confirm Password, type a password of at least 8 characters.
3. If your site has a navigation bar or a footer, you also see Detect sign-in and account info in my Navigation and Footer, switched on. TeleportHQ then looks for existing "Log in" or "My account" buttons there and offers to connect them to the signed-in user with the AI Assistant. This uses AI tokens. Turn it off if you don't want it. See How to show the signed-in user's name, photo and details.
4. Click Create Admin & Enable. To skip the admin account, click Skip & Enable.

The admin account can sign in to your site with full admin rights and open the admin panel, if you add one. You can add more accounts later. See How to manage your site's users and roles.

Check that it worked#

• A message says "Authentication enabled successfully. sign-in and sign-up pages created."
• The padlock button now says Logged Out: you're previewing the site as a visitor who isn't signed in.

• In the left sidebar, click Pages, Components & Tree View. The authentication folder holds the pages sign-in, sign-up, forgot-password, reset-password, profile and my-profile.

  

• If your site has a navigation bar, TeleportHQ adds sign-in and sign-up links to it, unless it already has a sign-in or account link.
• A window titled Authentication is Ready! offers a quick tour. Click Show Me, or Maybe Later. You can play the tour again from the left sidebar: Plugins → Authentication → Start tutorial.

After you publish, the sign-in page is at your site's address followed by /sign-in, for example https://sunny-bakery.teleporthq.app/sign-in, and the sign-up page at /sign-up. The activation window's list says /auth/signin and /auth/signup, but the pages are published under their page names. If you rename a page or give it another address, its address changes too. See How to publish a web app.

Troubleshooting#

The Authentication button is greyed out The editor is offline. Wait until the connection is back.

"Failed to setup authentication tables: …" TeleportHQ couldn't prepare the database you picked. Authentication isn't turned on, and the window stays open. Check that the database connection works, then try again. See How to refresh, edit or remove a data source.

"Failed to create admin user: …" TeleportHQ couldn't create the admin account, so authentication isn't turned on yet. The window stays open. Try again, or click Skip & Enable and add the admin later with Create New User.

"This email already exists in the database. Please use a different email." An account with that email is already in the database. Type another address, or click Skip & Enable and use the existing account.

"Passwords do not match or are too short (minimum 8 characters)" Type the same password twice, with at least 8 characters. The message also shows when Admin Email isn't a valid email address.

"An account with … already exists, so it was kept with its password and role." This isn't an error. You turned authentication on again, and the admin account from last time is still in the database. Sign in with its old password.

The sign-in pages are gone If you deleted the whole authentication folder while authentication is on, rebuild it:

1. Click the Project settings cog at the bottom of the left sidebar.
2. Under Editor, click Preferences, then Editing.
3. Turn on Show proposed plugins.
4. In Pages, Components & Tree View, a dashed authentication folder appears with a Regenerate button. Click it.
5. In the Regenerate Authentication Pages window, click Regenerate Pages.

See How to change editor preferences.

Good to know#

• The Sign Up and Sign In sections aren't a login. The Sign Up and Sign In sections in Elements → Sections are ordinary forms: they collect an email address into Growth → Forms and don't create accounts or sign anyone in. Real visitor accounts come only from Authentication. See How to create a form.
• Social login needs setup. The activation window mentions "Social login with Google and Facebook", but each provider works only after you add its credentials. See How to add "Sign in with Google" and other providers.
• Visitor emails need an email provider. Welcome and password reset emails are sent through your own provider (SendGrid, Mailgun, MailerSend, Postmark or Resend). See How to customize welcome and password-reset emails.
• Protect pages. To show a page only to signed-in visitors, see How to make a page visible only to signed-in users.
• Restyling the new pages. On some projects, TeleportHQ also offers Refine the new Authentication pages?, which lays them out again to match your design with AI. Their text and fields stay the same. See How to restyle generated login, blog or store components with "Refine".
• Changes reach your live site after you publish.
• To remove sign-in again, turn authentication off. See How to choose login methods. To make the project a website again, restore the Before Web App features Enabled backup. See How to back up and restore your project.