init firebase with authentication

Author: DystoriaX

.env.example

@@ -0,0 +1,6 @@
+REACT_APP_FIREBASE_API_KEY=
+REACT_APP_FIREBASE_AUTH_DOMAIN=
+REACT_APP_FIREBASE_PROJECT_ID=
+REACT_APP_FIREBASE_STORAGE_BUCKET=
+REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
+REACT_APP_FIREBASE_APP_ID=

src/api/auth.ts

@@ -0,0 +1,47 @@
+import { auth } from "../firebase/config";
+import {
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  signOut as firebaseSignOut,
+} from "firebase/auth";
+import { createUser } from "./profile";
+
+type SignUpRequest = {
+  name: string;
+  email: string;
+  password: string;
+  subcomms: string;
+  contactNum: string;
+};
+export async function signUp(params: SignUpRequest) {
+  const { name, email, password, subcomms, contactNum } = params;
+
+  const userCredential = await createUserWithEmailAndPassword(
+    auth,
+    email,
+    password
+  );
+
+  await createUser({
+    credential: userCredential,
+    profile: {
+      name,
+      email,
+      subcomms,
+      contactNum,
+    },
+  });
+}
+
+type LoginRequest = {
+  email: string;
+  password: string;
+};
+export async function login(param: LoginRequest) {
+  const { email, password } = param;
+  return signInWithEmailAndPassword(auth, email, password);
+}
+
+export async function signOut() {
+  await firebaseSignOut(auth);
+}

src/api/profile.ts

@@ -0,0 +1,33 @@
+import { UserCredential } from "firebase/auth";
+import { auth, db } from "../firebase/config";
+import { doc, setDoc, updateDoc } from "@firebase/firestore";
+import { UserProfile } from "../types/profile";
+
+const USER_PATH = "users";
+
+export type CreateUserRequest = {
+  credential: UserCredential;
+  profile: UserProfile;
+};
+export async function createUser(params: CreateUserRequest) {
+  const { credential, profile } = params;
+  const uid = credential.user.uid;
+
+  await setDoc(doc(db, USER_PATH, uid), profile);
+}
+
+export type UpdateUserRequest = {
+  profile: Partial<Omit<UserProfile, "user" | "email">>;
+};
+export async function updateUserData(params: UpdateUserRequest) {
+  const { profile } = params;
+
+  if (!auth.currentUser) {
+    console.error("User needs to log in");
+    return;
+  }
+
+  const uid = auth.currentUser.uid;
+
+  await updateDoc(doc(db, USER_PATH, uid), profile);
+}

src/firebase/config.ts

@@ -0,0 +1,18 @@
+import { initializeApp } from "firebase/app";
+import { getFirestore } from "@firebase/firestore";
+import { getAuth } from "firebase/auth";
+import { getStorage } from "firebase/storage";
+
+const firebaseConfig = {
+  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.REACT_APP_FIREBASE_APP_ID,
+};
+
+const app = initializeApp(firebaseConfig);
+export const db = getFirestore(app);
+export const auth = getAuth(app);
+export const storage = getStorage(app);

src/types/profile.ts

@@ -0,0 +1,8 @@
+export type UserProfile = {
+  name: string;
+  email: string;
+  contactNum: string;
+  // role: string; // clarify
+  subcomms: string;
+  // status: string; // clarify
+};