๐Ÿ”‘ Authentication

You might want to integrate authentication into your game, to save your users' progress for instance.

Considerations

Managing user accounts involves legal obligations such as GDPR (opens in a new tab) and is, in general, a complex topic. In the context of a web game, requiring authentication is also a big barrier to entry and is a turn-off for many users. Before adding authentication, ask yourself if there is any way you could persist the player's state on the client.

For instance, you could use localStorage (opens in a new tab) to save the player's progress in their browser, or embed a code in a URL that they can copy to "log in" on various devices. Of course it depends on the type of game you're building, but if it is mostly a front-end experience, you might not need to implement backend authentication at all.

If you are certain you want to integrate authentication, an approach to consider is to let users play your game without account to see if they like it first, and offer to optionally sign up to save their progress.

Services and libraries

There are many services and libraries to help you implement user authentication. If you are using a Backend-as-a-Service like Firebase (opens in a new tab), Supabase (opens in a new tab), Nakama (opens in a new tab), or Colyseus (opens in a new tab), or a backend web framework such as NestJS (opens in a new tab), Ruby on Rails (opens in a new tab), or Django (opens in a new tab), authentication is built-in, with more or less features and OAuth providers available. There is also Auth0 (opens in a new tab), SuperTokens (opens in a new tab), Clerk (opens in a new tab), Userfront (opens in a new tab), Magic Auth (opens in a new tab), Ory (opens in a new tab), and many more services, but make sure to check their pricing carefully, as they can get very expensive at scale.

You can also integrate libraries that focus on authentication. For instance, in the Node.js ecosystem, there is Passport (opens in a new tab) for Express, Grant (opens in a new tab), and Auth.js (opens in a new tab) which supports Next.js and SvelteKit. Auth.js is pretty opinionated (particularly the fact that password logins (opens in a new tab) are discouraged), but it is very easy to integrate to those meta-frameworks if you have your own database and want to stay in control of your authentication layer. It is particularly relevant for projects that use React Three Fiber + Next.js or Threlte + SvelteKit.

Strategies

OAuth

Using OAuth to authenticate users is a great way to get started with authentication by relying on users having accounts on other platforms, saving them a few clicks. It's easy to implement and doesn't require you to store passwords or send emails. You can for instance offer signing in with Google (opens in a new tab), Apple (opens in a new tab), Discord (opens in a new tab), Twitch (opens in a new tab), Twitter (opens in a new tab) or Facebook (opens in a new tab). Pick the services that align with your target audience's preferences!

Passwordless, OTP

An other way to avoid storing passwords is to send your users a one-time password ("OTP", sometimes also called "magic link") to their email address (opens in a new tab) or phone number. You will need a third-party email or SMS service with this method, such as SendGrid (opens in a new tab) for emails or Twilio (opens in a new tab) for SMS.

Email and password

Finally, you can also ask your users to sign up with an email address and a password, but make sure to hash the password (with bcrypt (opens in a new tab) for instance), do not reinvent the wheel, and check for up-to-date security best practices (opens in a new tab).