feat: added firebase auth integration

api/pyproject.toml

@@ -21,6 +21,7 @@ pydantic = {extras = ["email"], version = "^2.7.4"}
 gunicorn = "^22.0.0"
 peewee = "^3.17.6"
 psycopg2-binary = "^2.9.9"
+firebase-admin = "^6.5.0"
 
 
 [build-system]

api/services/meeting.py

@@ -3,7 +3,6 @@
 from integrations.meetings.zoom import ZoomMeeting
 from typing import Dict, Union
 from db.models.meeting import Meeting
-
 class MeetingService:
  __meeting_provider_instance: Dict[str, Union[ZoomMeeting, GmeetMeeting]] = {
  "zoom": ZoomMeeting,

client/package.json

@@ -10,10 +10,14 @@
  "preview": "rsbuild preview"
  },
  "dependencies": {
+ "@tanstack/react-query": "^5.50.1",
+ "@tanstack/react-query-devtools": "^5.50.1",
+ "firebase": "^10.12.3",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "styled-components": "^6.1.11",
- "styled-theming": "^2.2.0"
+ "styled-theming": "^2.2.0",
+ "zustand": "^4.5.4"
  },
  "devDependencies": {
  "@biomejs/biome": "^1.8.1",

client/rsbuild.config.ts

@@ -3,6 +3,9 @@ import { pluginReact } from "@rsbuild/plugin-react";
 import { pluginStyledComponents } from "@rsbuild/plugin-styled-components";
 
 export default defineConfig({
+ dev: {
+ assetPrefix: true,
+ },
  plugins: [
  pluginReact(),
  pluginStyledComponents({

client/src/App.tsx

@@ -1,8 +1,13 @@
+import { useAuth } from "./store/auth";
+
 const App = () => {
+ const { googleLogin } = useAuth();
+
  return (
  <div>
  <h1>Rsbuild with React</h1>
  <p>Start building amazing things with Rsbuild.</p>
+ <button onClick={googleLogin}>Google Login</button>
  </div>
  );
 };

client/src/apis/useGoogleLogin.ts

@@ -0,0 +1,21 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
+import Firebase from "../integrations/firebase";
+
+export const GOOGLE_LOGIN_Q_KEY = "GOOGLE_LOGIN_Q_KEY" as const;
+
+export const useGoogleLogin = () => {
+ const queryClient = useQueryClient();
+ return () =>
+ queryClient.ensureQueryData({
+ queryKey: [GOOGLE_LOGIN_Q_KEY],
+ queryFn: async () => {
+ const res = await signInWithPopup(
+ Firebase.auth,
+ new GoogleAuthProvider()
+ );
+ const token = await res.user.getIdToken();
+ console.log(token);
+ },
+ });
+};

client/src/constants/config.ts

@@ -0,0 +1,8 @@
+export const {
+ FIREBASE_API_KEY,
+ FIREBASE_APP_ID,
+ FIREBASE_AUTH_DOMAIN,
+ FIREBASE_MEASUREMENT_ID,
+ FIREBASE_MESSAGE_SENDER_ID,
+ FIREBASE_PROJECT_ID,
+} = process.env;

client/src/env.d.ts

@@ -1 +1,14 @@
 /// <reference types="@rsbuild/core/types" />
+
+interface ImportMetaEnv {
+ readonly FIREBASE_API_KEY: string;
+ readonly FIREBASE_AUTH_DOMAIN: string;
+ readonly FIREBASE_PROJECT_ID: string;
+ readonly FIREBASE_MESSAGE_SENDER_ID: string;
+ readonly FIREBASE_APP_ID: string;
+ readonly FIREBASE_MEASUREMENT_ID: string;
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv;
+}

client/src/index.tsx

@@ -1,16 +1,20 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import { NetworkConnection } from "./integrations/network";
 import { Theme } from "./theme";
 
 const rootEl = document.getElementById("root");
+
 if (rootEl) {
  const root = ReactDOM.createRoot(rootEl);
  root.render(
  <React.StrictMode>
- <Theme>
- <App />
- </Theme>
+ <NetworkConnection>
+ <Theme>
+ <App />
+ </Theme>
+ </NetworkConnection>
  </React.StrictMode>
  );
 }

client/src/integrations/firebase.ts

@@ -0,0 +1,22 @@
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+
+const firebaseConfig = {
+ apiKey: "AIzaSyDtWMlNHWufXi2weR1hYQTN9UjDqBOcV_4",
+ authDomain: "chat-app-6a541.firebaseapp.com",
+ databaseURL: "https://chat-app-6a541.firebaseio.com",
+ projectId: "chat-app-6a541",
+ storageBucket: "chat-app-6a541.appspot.com",
+ messagingSenderId: "856152974268",
+ appId: "1:856152974268:web:1f6e58076f79fc0a3f41b9",
+ measurementId: "G-V7CZLQ2CRK",
+};
+
+console.log(firebaseConfig);
+
+const app = initializeApp(firebaseConfig);
+
+export default class Firebase {
+ public static app = app;
+ public static auth = getAuth();
+}

client/src/integrations/network.tsx

@@ -0,0 +1,8 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { FC, PropsWithChildren } from "react";
+
+export const queryClient = new QueryClient();
+
+export const NetworkConnection: FC<PropsWithChildren> = ({ children }) => (
+ <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);

client/src/store/auth.ts

@@ -0,0 +1,21 @@
+import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
+import { create } from "zustand";
+import Firebase from "../integrations/firebase";
+
+interface State {
+ refreshToken: string;
+}
+
+interface Action {
+ googleLogin: () => Promise<void>;
+}
+
+const useRootState = create<State & Action>((set) => ({
+ refreshToken: "",
+ googleLogin: async () => {
+ const res = await signInWithPopup(Firebase.auth, new GoogleAuthProvider());
+ set(() => ({ refreshToken: res.user.refreshToken }));
+ },
+}));
+
+export const useAuth = () => useRootState((state) => state);

client/src/store/auth/index.ts

@@ -0,0 +1,16 @@
+import { create } from "zustand";
+
+interface State {
+ refreshToken: string;
+}
+
+interface Action {
+ setAuthData: () => void;
+}
+
+const useRootState = create<State & Action>((set) => ({
+ refreshToken: "",
+ setAuthData: () => {},
+}));
+
+export const useAuth = () => useRootState((state) => state);