Add Authentication to your App

This guide will show you how you can access your data on multiple devices by signing in to your app.

#Add passkey authentication

Jazz has a built-in passkey authentication component that you can use to add authentication to your app. This is the easiest way to get started with securely authenticating users into your application. By adding this component, when users access your app, they'll be greeted with an input where they can enter their name, and create a passkey.

#Give it a go!

... what, already?! Yes! Run your app and try creating a passkey and logging in!

#Not working?

• Did you add <PasskeyAuthBasicUI> inside your provider?
• Does it wrap all the children?
• Are you running your app in a secure context (either HTTPS or localhost)?

#Add a recovery method

Passkeys are very convenient for your users because they offer a secure alternative to traditional authentication methods and they're normally synchronised across devices automatically by the user's browser or operating system.

However, they're not available everywhere, and in case the user loses or deletes their passkey by mistake, they won't be able to access their account.

So, let's add a secondary login method using a passphrase. You can integrate as many different authentication methods as you like in your app.

#Create an Auth component

The PasskeyAuthBasicUI component is not customisable, so we'll implement our own Auth component so that we can extend it.

#Use your new component

#Show recovery key

Jazz allows you to generate a passphrase from a wordlist which can be used to log in to an account. This passphrase will work regardless of how the account was originally created (passkey, Clerk, BetterAuth, etc.). Each account will always have the same recovery key.

You can get started with a wordlist from here. For example, you could save the english.json file in your project and format it as a JavaScript export.

export const wordlist = [
  "abandon",
  // ... many more words
  "zoo"
];

We'll import this, and add a textarea into our auth component which will show the recovery key for the current user's account.

#Allow users to log in with the recovery key

Now you're displaying a recovery key to users, so we'll allow users to login using a saved recovery key by extending the Auth component a little further.

Congratulations! 🎉 You've added authentication to your app, allowing your users to log in from multiple devices, and you've added a recovery method, allowing users to make sure they never lose access to their account.

#Next steps

• Check out how to use other types of authentication
• Learn more about sharing and collaboration
• Find out how to use server workers to build more complex applications