How to change Authentication strategy
Learn how to change the authentication strategy in Makerkit. Choose between email and password, phone number, email link, and OAuth.
Makerkit supports various authentication strategies supported by Firebase. We can customize these using the global configuration at src/configurationt.ts
.
In the configuration file, you can find the following code:
auth: { // Enable MFA. You must upgrade to GCP Identity Platform to use it. // see: https://cloud.google.com/identity-platform/docs/product-comparison enableMultiFactorAuth: true, // When enabled, users will be required to verify their email address // before being able to access the app requireEmailVerification: process.env.NEXT_PUBLIC_REQUIRE_EMAIL_VERIFICATION === 'true', // NB: Enable the providers below in the Firebase Console // in your production project providers: { emailPassword: true, phoneNumber: false, emailLink: false, oAuth: [GoogleAuthProvider], },},
We will need to edit this file to change the authentication strategy.
Enabling Email and Password Authentication
This is the default authentication strategy. It allows users to sign up and sign in using their email and password.
To enable this strategy, set providers.emailPassword
to true
.
providers: { emailPassword: false, phoneNumber: true, emailLink: false, oAuth: [GoogleAuthProvider],},
Enabling Phone Number Authentication
This strategy allows users to sign up and sign in using their phone number.
To enable this strategy, set providers.phoneNumber
to true
.
providers: { emailPassword: false, phoneNumber: true, emailLink: false, oAuth: [GoogleAuthProvider],},
Enabling Email Link Authentication
This strategy allows users to sign up and sign in using their email address. A link will be sent to their email address to verify their identity.
To enable this strategy, set providers.emailLink
to true
.
providers: { emailPassword: false, phoneNumber: trfalseue, emailLink: true, oAuth: [GoogleAuthProvider],},
Enabling OAuth Authentication
This strategy allows users to sign up and sign in using their social media accounts. You can enable multiple OAuth providers.
To enable this strategy, set providers.oAuth
to an array of OAuth providers.
import { GoogleAuthProvider, FacebookAuthProvider } from 'firebase/auth';providers: { emailPassword: false, phoneNumber: false, emailLink: false, oAuth: [GoogleAuthProvider, FacebookAuthProvider],},
Can I use multiple authentication strategies?
Yes, you can use multiple authentication strategies. For example, you can enable email and password authentication and phone number authentication at the same time.
providers: { emailPassword: true, phoneNumber: true, emailLink: false, oAuth: [GoogleAuthProvider],},
With that said, the UI is not designed to support multiple authentication strategies. You will need to customize the UI to support multiple authentication strategies*.