🔑 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 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 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, Supabase, Nakama, or Colyseus, or a backend web framework such as NestJS, Ruby on Rails, or Django, authentication is built-in, with more or less features and OAuth providers available. There is also Auth0, SuperTokens, Clerk, Userfront, Magic Auth, Ory, 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 for Express, Grant, and Auth.js which supports Next.js and SvelteKit. Auth.js is pretty opinionated (particularly the fact that password logins 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, Apple, Discord, Twitch, Twitter or Facebook. 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 or phone number. You will need a third-party email or SMS service with this method, such as SendGrid for emails or Twilio 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 for instance), do not reinvent the wheel, and check for up-to-date security best practices.