@enclavemoney/enclave-wallet-sdk/FIREBASE_SETUP.md

A simple enclave wallet SDK for React applications

# Firebase Setup Guide for Gmail Login

This guide will help you set up Firebase Authentication for Gmail login in the Wallet SDK.

## Prerequisites

1. A Google account
2. Access to [Firebase Console](https://console.firebase.google.com/)

## Setup Steps

### 1. Create a Firebase Project

1. Go to [Firebase Console](https://console.firebase.google.com/)
2. Click "Create a project" or select an existing project
3. Follow the setup wizard to create your project

### 2. Enable Authentication

1. In your Firebase project, go to **Authentication** in the left sidebar
2. Click on the **Sign-in method** tab
3. Click on **Google** provider
4. Toggle the **Enable** switch
5. Add your project's authorized domains if needed
6. Click **Save**

### 3. Get Firebase Configuration

1. Go to **Project Settings** (gear icon) > **General**
2. Scroll down to "Your apps" section
3. Click **Add app** and choose **Web** (</> icon)
4. Register your app with a nickname
5. Copy the Firebase configuration object

### 4. Configure Environment Variables

Since this is an npm package, you'll need to configure Firebase using environment variables in your consuming application.

Create a `.env` file in your consuming application's root directory:

```env
REACT_APP_FIREBASE_API_KEY=your-api-key-here
REACT_APP_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=your-project-id
REACT_APP_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=123456789
REACT_APP_FIREBASE_APP_ID=your-app-id
```

### 5. Install Dependencies

Make sure Firebase is installed in your project:

```bash
npm install firebase
```

### 6. Configure Authorized Domains

1. In Firebase Console, go to **Authentication** > **Settings** > **Authorized domains**
2. Add your domain(s) where the wallet will be used:
   - `localhost` (for development)
   - Your production domain
   - Any other domains where the wallet will be embedded

## Usage

### Basic Setup

```javascript
import { WalletProvider } from "@enclavemoney/enclave-wallet-sdk";

function App() {
  return (
    <WalletProvider sdkKey="your-enclave-sdk-key">
      {/* Your app components */}
    </WalletProvider>
  );
}
```

### How it Works

Once your Firebase configuration is set up via environment variables, users can click the "Continue with Google" button to authenticate using their Gmail account. The authentication will:

1. Open a popup for Google sign-in
2. Handle the authentication flow
3. Return user information (email, name, profile picture)
4. Integrate with the existing wallet session management

## Troubleshooting

### Common Issues

1. **Popup blocked**: Ensure popups are allowed for your domain
2. **Domain not authorized**: Add your domain to Firebase authorized domains
3. **API key invalid**: Double-check your environment variables
4. **Google provider not enabled**: Ensure Google authentication is enabled in Firebase Console

### Error Messages

- `auth/popup-closed-by-user`: User closed the popup before completing sign-in
- `auth/popup-blocked`: Browser blocked the popup window
- `auth/network-request-failed`: Network connectivity issues
- `auth/cancelled-popup-request`: Multiple popup requests cancelled previous one

## Security Notes

- Never commit your `.env` file to version control
- Use different Firebase projects for development and production
- Regularly rotate your API keys
- Monitor authentication usage in Firebase Console
- Restrict your Firebase API keys to specific domains/applications in production

## Support

For additional help:

- [Firebase Auth Documentation](https://firebase.google.com/docs/auth)
- [Firebase Console](https://console.firebase.google.com/)
- [Google Identity Platform](https://developers.google.com/identity)