Skip to main content

Use Firebase Authentication with Squid

Secure your Squid app using Firebase Authentication​

What you'll build​

  • A full-stack application that uses Firebase Authentication to handle app auth.
  • A Squid backend that authorizes database access based on your Firebase Authentication token.

What you'll learn​

  • How to integrate Firebase Auth with Squid to manage access to resources.

What you'll need​

  • A Squid app. You can create a new app in the Squid Console.
  • A Firebase app. You can create an app or view your existing app in the Firebase Console.
  • You'll need some experience with TypeScript. Experience with React is useful, but not required.

Environment setup​

  1. In the Squid Console, switch to the dev environment.

switch environment

  1. Download the firebase-authentication code sample using the following command. Replace the placeholders with the values from your Squid application as shown in the console.
    2. npx @squidcloud/cli init-sample firebase-authentication --template firebase-authentication --appId YOUR_SQUID_APP_ID --apiKey YOUR_SQUID_API_KEY --environmentId dev --squidDeveloperId YOUR_SQUID_DEVELOPER_ID --region YOUR_REGION
  1. Open the project in the IDE of your choice.
  2. Start the app locally by runnning the following command in the project folder:
npm run start
  1. To view the app, navigate to localhost:PORT where PORT is logged in the terminal. The address will likely be http://localhost:5173.

Add the Firebase Authentication integration​

  1. In the Squid Console, click the Integrations tab.

  2. Select Firebase Authentication from the Available integrations tab.

  3. Provide the following details:

  • Integration ID: firebase-auth
  • Project ID: This is a unique identifier for your Firebase project. You can view your project ID in the Firebase Console.
  1. Click Add integration.

Firebase integration

Now that you added the Firebase Authentication integration, check out the authentication documentation to see how to use Firebase Authentication with Squid in your app.

Note

The react-firebase-hooks is a third-party package that is not maintained by Firebase. You can opt not to use this package, but you will have to write and maintain your own code to handle observability to keep your auth token up-to-date.

Initialize Firebase​

In the sample app, navigate to the frontend's firebase.ts file in the src directory. Update the placeholders with information about your Firebase app:

frontend/src/firebase.ts
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

// TODO: Add SDKs for other Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration

const firebaseConfig = {
  apiKey: 'YOUR_FIREBASE_API-KEY',
  authDomain: 'YOUR_FIREBASE_PROJECT_ID.firebaseapp.com',
  projectId: 'YOUR_FIREBASE_PROJECT_ID',
  appId: 'YOUR_FIREBASE_APP_ID',
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
export const auth = getAuth(firebaseApp);
export default firebaseApp;

With configuration complete, you can now log into the sample app using Firebase Authentication. Your auth token gets passed to the Squid backend to manage access to resources. For more information on securing your data, view the security rules documentation.