Buy nowGet update
  • getting started
    • Introduction
    • Quick start
    • Mock server
    • Deployment
    • Package & license
    • Setup
    • Figma
  • theme UI
    • Colors
    • Typography
    • IconsNEW
    • Shadows
    • Css vars
    • Logo
    • Layout
    • Navigation
    • Settings
  • Global
    • Styles
    • Config
    • Components overrides
  • development
    • Routing
    • Subfolder
    • Authentication
      • Jwt
      • Firebase
      • Amplify
      • Supabase
      • Auth0
      • User info
    • Environment variables
    • Api calls
    • Multi language
    • Structure
    • Clean project
    • Dependencies
    • Tailwind
    • Migrate to CRA
    • Credit assets
  • support
    • 🔵 Update
    • 🔴 Faqs & support
    • 🟣 Changelogv7.4.0
© All rights reserved.ContactHome

Firebase authentication

For version v5.

Demo flow
Choose an authentication strategy

Update the auth method in your config.

src/config-global.ts
auth: {
  method: 'firebase',
},
Create a Firestore database

Set the Firestore security rules to only allow authenticated access Watch

Update rule in Cloud Firestore
service cloud.firestore {
    match /databases/{database}/documents {
    match /{document=**} {
    allow read, write: if request.auth.uid != null;
    }
  }
}
Get your Firebase credentials
  • Get API key .
  • Update to your .env file.
VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APPID=

You can find this configuration in your Firebase project settings:

minimal-preview