Connecting Firebase

This guide explains how to integrate Firebase in the Apps in Toss (mini app) WebView environment. This document Vite (React + TypeScript) was written based on a project using that stack.

---

Overview

Firebase is a service that provides various features such as authentication, databases, and file storage. It can also be used in the Apps in Toss WebView environment, but Security settings and environment variable managementare important.

---

1. Getting Ready

• Firebase console account (console.firebase.google.com)
• A project built with Vite (React + TypeScript)
• Node.js, npm (or yarn, pnpm)

2. Create a Firebase project

1. In the Firebase console Create projectto create a new project.
2. Project settings → Add app → Web (</>) select it.
3. Enter an app nickname and register it, and the configuration info (firebaseConfig) will appear as shown below.

const firebaseConfig = {
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...',
  appId: '...',
  measurementId: '...'
}

3. Set environment variables

For security, it is recommended to manage Firebase configuration information as Vite environment variables.

At the project root, .env create a file and write it as shown below.

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

In code, import.meta.env.VITE_FIREBASE_API_KEYuse it like this.

4. Install and initialize Firebase

Written based on the latest Firebase modular SDK (v12+).

npm install firebase
# or
yarn add firebase

src/firebase/init.ts

import { initializeApp, getApps } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'
import { getStorage } from 'firebase/storage'

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
}

const app = getApps().length ? getApps()[0] : initializeApp(firebaseConfig)

export const auth = getAuth(app)
export const db = getFirestore(app)
export const storage = getStorage(app)

Note:

• databaseURLis Realtime Databaseonly needed when using it. If you're using Firestore, you can leave it out.
• measurementIdis needed when using Firebase Analytics(Google Analytics).

5. Firestore usage example

If you've initialized Firestore, you can read or write data inside a React component. Below is App.tsxthe simplest example of reading and saving a single document.

import { useState, useEffect } from 'react'
import { db } from './firebase/init'
import { doc, getDoc, setDoc } from 'firebase/firestore'

function App() {
  const [name, setName] = useState('')
  const [savedName, setSavedName] = useState('')

  // Read data from Firestore
  useEffect(() => {
    const fetchData = async () => {
      const ref = doc(db, 'users', 'exampleUser')
      const snap = await getDoc(ref)
      if (snap.exists()) {
        setSavedName(snap.data().name)
      }
    }
    fetchData()
  }, [])

  // Write data to Firestore
  const handleSave = async () => {
    const ref = doc(db, 'users', 'exampleUser')
    await setDoc(ref, { name })
    setSavedName(name)
    setName('')
  }

  return (
    <div style={{ padding: 24 }}>
      <h1>Simple Firestore Example</h1>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter name"
      />
      <button onClick={handleSave}>Save</button>
      <p>Saved name: {savedName || '(none)'}</p>

  )
}

export default App

How it works

• Reading data (getDoc)

  • Loads the Firestore users/exampleUser document once.
  • If the document exists, display the value of snap.data() on screen.
• Writing data (setDoc)

  • Overwrites and saves the entered name to Firestore.
  • If the document doesn't exist, a new one is created automatically.

Firestore supports many features beyond single documents.

• Real-time subscription: onSnapshot(doc(...))will automatically update the UI whenever the document changes.
• Working with collections: collection(), addDoc()can be used to add and load multiple documents.
• File storage: getStorage()to Storageconnect and upload images or files.
• Authentication integration: getAuth()can be used together with it to save user-specific data.

6. Security checklist

• Manage sensitive information with environment variables

  • Do not write the Firebase API key, service account key, etc. directly in code and .envmanage them as environment variables.
• Don't upload environment files to Git, etc.

  • .env The file .gitignoremust be added.
  • If a key is exposed, immediately reissue it in the Firebase console and review the relevant project permissions.
• Set Firebase security rules

  • Firestore / Storage are basically open to all users.
  • Before deployment, make sure to modify the rules so that only authenticated users can access them.
• Check origin restrictions

  • In the Firebase console's Authentication / Hosting / API Key settings, restrict the allowed domains.
  • If you allow only the mini app (WebView) domain, you can prevent unauthorized access.

Allowed domains

https://<appName>.apps.tossmini.com : production environment
https://<appName>.private-apps.tossmini.com : console QR test environment