FirebaseAuthProvider
@adminjs/firebase-auth
@adminjs/firebase-auth
is an authentication provider which allows you to sign in using Firebase Authentication.
Prerequisites
Make sure you follow official Firebase documentation to properly set up Firebase Authentication in Firebase Console: https://firebase.google.com/docs/auth
Installation
@adminjs/firebase-auth
is a premium feature which can be purchased at https://cloud.adminjs.co
All premium features currently use One Time Payment model and you can use them in all apps that belong to you. Once you purchase the addon, you will receive a license key which you should provide in @adminjs/firebase-auth
configuration in your application's code.
Installing the library:
The license key should be provided via FirebaseAuthProvider
constructor:
If you encounter any issues or require help installing the package please contact us through our Discord server.
Usage
FirebaseAuthProvider
requires you to prepare Firebase-specific configuration.
UI Config
@adminjs/firebase-auth
uses firebaseui-web
to generate Firebase UI inside the login form and it requires you to configure it. Please refer to the following link for configuration options: https://github.com/firebase/firebaseui-web/blob/master/types/index.d.ts#L115
Note that you can only configure raw values but you will not be able to configure functions or callbacks this way. A workaround will be described in the later part of this documentation.
Firebase Configuration
@adminjs/firebase-auth
initializes a Firebase App in the Login view. Make sure you copy the configuration from your project in Firebase Console.
You will most likely also have to initialize a Firebase app on your server's end to verify the user's access token later:
Authenticate method
Lastly, you must define an authenticate
method which you will use to verify the user's access token and return the user object.
FirebaseAuthProvider Configuration
After you are done with Firebase-specific configuration, you can instantiate FirebaseAuthProvider
:
With your plugin and auth provider configured you should be able to restart your server and a new login page with embedded Firebase UI should appear.
Troubleshooting
How to prevent @adminjs/firebase-auth from overriding the Login page?
By default, @adminjs/firebase-auth
will override your Login page with it's own UI. You can disable that by adding overrideLogin: false
in FirebaseAuthProvider
configuration:
If you do this, though, Firebase won't render it's own UI. You will have to create your own Login page and import FirebaseAuthForm
component from @adminjs/firebase-auth
and put it wherever you want in your own Login component.
Remember to override Login
using your component loader:
How to configure functions and callbacks of UI Config?
Follow the steps above to create your custom Login page. Create UI configuration in your custom component and provide it as props of FirebaseAuthForm
:
How to customize the look of Firebase UI?
If you decide to follow the steps above you will be able to create a styled component out of FirebaseAuthForm
and customize it fully.
Alternatively, you can create a CSS file and add it to your app's assets.
Make sure the CSS file is present in your server's public assets directory. Lastly, configure assets
of AdminJS:
Last updated