Authenticate with Firebase in JavaScript Using a Custom Authentication System
Stay organized with collections
Save and categorize content based on your preferences.
You can integrate Firebase Authentication with a custom authentication system by
modifying your authentication server to produce custom signed tokens when a user
successfully signs in. Your app receives this token and uses it to authenticate
with Firebase.
Click Generate New Private Key at the bottom of the
Firebase Admin SDK section of the Service Accounts page.
The new service account's public/private key pair is automatically
saved on your computer. Copy this file to your authentication server.
Authenticate with Firebase
When users sign in to your app, send their sign-in credentials (for
example, their username and password) to your authentication server. Your
server checks the credentials and returns a
custom
token if they are valid.
After you receive the custom token from your authentication server, pass
it to signInWithCustomToken to sign in the user:
Web
import{getAuth,signInWithCustomToken}from"firebase/auth";constauth=getAuth();signInWithCustomToken(auth,token).then((userCredential)=>{// Signed inconstuser=userCredential.user;// ...}).catch((error)=>{consterrorCode=error.code;consterrorMessage=error.message;// ...});
firebase.auth().signInWithCustomToken(token).then((userCredential)=>{// Signed invaruser=userCredential.user;// ...}).catch((error)=>{varerrorCode=error.code;varerrorMessage=error.message;// ...});
After a user signs in for the first time, a new user account is created and
linked to the credentials—that is, the user name and password, phone
number, or auth provider information—the user signed in with. This new
account is stored as part of your Firebase project, and can be used to identify
a user across every app in your project, regardless of how the user signs in.
In your apps, the recommended way to know the auth status of your user is to
set an observer on the Auth object. You can then get the user's
basic profile information from the User object. See
Manage Users.
In your Firebase Realtime Database and Cloud StorageSecurity Rules, you can
get the signed-in user's unique user ID from the auth variable,
and use it to control what data a user can access.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-15 UTC."],[],[],null,["You can integrate Firebase Authentication with a custom authentication system by\nmodifying your authentication server to produce custom signed tokens when a user\nsuccessfully signs in. Your app receives this token and uses it to authenticate\nwith Firebase.\n\nBefore you begin\n\n1. [Add Firebase to your JavaScript project](/docs/web/setup).\n2. Get your project's server keys:\n 1. Go to the [Service Accounts](https://console.firebase.google.com/project/_/settings/serviceaccounts/adminsdk) page in your project's settings.\n 2. Click *Generate New Private Key* at the bottom of the *Firebase Admin SDK* section of the *Service Accounts* page.\n 3. The new service account's public/private key pair is automatically saved on your computer. Copy this file to your authentication server.\n\nAuthenticate with Firebase\n\n1. When users sign in to your app, send their sign-in credentials (for example, their username and password) to your authentication server. Your server checks the credentials and returns a [custom\n token](/docs/auth/admin/create-custom-tokens) if they are valid.\n2. After you receive the custom token from your authentication server, pass it to `signInWithCustomToken` to sign in the user: \n\n Web \n\n ```javascript\n import { getAuth, signInWithCustomToken } from \"firebase/auth\";\n\n const auth = getAuth();\n signInWithCustomToken(auth, token)\n .then((userCredential) =\u003e {\n // Signed in\n const user = userCredential.user;\n // ...\n })\n .catch((error) =\u003e {\n const errorCode = error.code;\n const errorMessage = error.message;\n // ...\n });https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/auth-next/custom/auth_sign_in_custom.js#L8-L21\n ```\n\n Web \n\n ```javascript\n firebase.auth().signInWithCustomToken(token)\n .then((userCredential) =\u003e {\n // Signed in\n var user = userCredential.user;\n // ...\n })\n .catch((error) =\u003e {\n var errorCode = error.code;\n var errorMessage = error.message;\n // ...\n });https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/auth/custom.js#L10-L20\n ```\n\nNext steps\n\nAfter a user signs in for the first time, a new user account is created and\nlinked to the credentials---that is, the user name and password, phone\nnumber, or auth provider information---the user signed in with. This new\naccount is stored as part of your Firebase project, and can be used to identify\na user across every app in your project, regardless of how the user signs in.\n\n- In your apps, the recommended way to know the auth status of your user is to\n set an observer on the `Auth` object. You can then get the user's\n basic profile information from the `User` object. See\n [Manage Users](/docs/auth/web/manage-users).\n\n- In your Firebase Realtime Database and Cloud Storage\n [Security Rules](/docs/database/security/user-security), you can\n get the signed-in user's unique user ID from the `auth` variable,\n and use it to control what data a user can access.\n\nYou can allow users to sign in to your app using multiple authentication\nproviders by [linking auth provider credentials to an\nexisting user account.](/docs/auth/web/account-linking)\n\nTo sign out a user, call [`signOut`](/docs/reference/js/auth#signout): \n\nWeb \n\n```javascript\nimport { getAuth, signOut } from \"firebase/auth\";\n\nconst auth = getAuth();\nsignOut(auth).then(() =\u003e {\n // Sign-out successful.\n}).catch((error) =\u003e {\n // An error happened.\n});https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/snippets/auth-next/index/auth_sign_out.js#L8-L15\n```\n\nWeb \n\n```javascript\nfirebase.auth().signOut().then(() =\u003e {\n // Sign-out successful.\n}).catch((error) =\u003e {\n // An error happened.\n});https://github.com/firebase/snippets-web/blob/467eaa165dcbd9b3ab15711e76fa52237ba37f8b/auth/index.js#L33-L37\n```"]]