# Firebase

{% tabs %}
{% tab title="VITE (TS)" %}
At present, Firebase requires you to set a secret in the following file. For more details, refer to Firebase here: <https://firebase.google.com/docs/reference/rest/auth>

1. Set Firebase Config in .env

{% code title=".env" %}

```typescript
VITE_APP_FIREBASE_API_KEY=
VITE_APP_FIREBASE_AUTH_DOMAIN=
VITE_APP_FIREBASE_PROJECT_ID=
VITE_APP_FIREBASE_STORAGE_BUCKET=
VITE_APP_FIREBASE_MESSAGING_SENDER_ID=
VITE_APP_FIREBASE_APP_ID=
VITE_APP_FIREBASE_MEASUREMENT_ID=
```

{% endcode %}

2. **Change AuthProvider**

{% code title="src\App.tsx" %}

```typescript
// Replace at line 17
import { FirebaseProvider as AuthProvider } from 'contexts/FirebaseContext';
```

{% endcode %}

3. **Change auth Hooks**
   1. Comment out another context in the following file and uncomment the Firebase one.

{% code title="src\hooks\useAuth.ts" %}

```typescript
import AuthContext from 'contexts/FirebaseContext';
```

{% endcode %}

4. Change Auth Login Method

{% code title="src/config.ts" %}

```typescript
export const APP_AUTH: AuthProvider = AuthProvider.FIREBASE;
```

{% endcode %}
{% endtab %}

{% tab title="VITE (JS)" %}
At present, Firebase requires you to set a secret in the following file. For more details, refer to Firebase here: <https://firebase.google.com/docs/reference/rest/auth>

1. Set Firebase Config in .env

{% code title=".env" %}

```javascript
VITE_APP_FIREBASE_API_KEY=
VITE_APP_FIREBASE_AUTH_DOMAIN=
VITE_APP_FIREBASE_PROJECT_ID=
VITE_APP_FIREBASE_STORAGE_BUCKET=
VITE_APP_FIREBASE_MESSAGING_SENDER_ID=
VITE_APP_FIREBASE_APP_ID=
VITE_APP_FIREBASE_MEASUREMENT_ID=
```

{% endcode %}

2. **Change AuthProvider**

{% code title="src\App.jsx" %}

```javascript
// Replace at line 17
import { FirebaseProvider as AuthProvider } from 'contexts/FirebaseContext';
```

{% endcode %}

3. **Change auth Hooks**
   1. Comment out another context in the following file and uncomment the Firebase one.

{% code title="src\hooks\useAuth.js" %}

```javascript
import AuthContext from 'contexts/FirebaseContext';
```

{% endcode %}

4. Change Auth Login Method

{% code title="src/config.js" %}

```javascript
export const APP_AUTH: AuthProvider = AuthProvider.FIREBASE;
```

{% endcode %}
{% endtab %}

{% tab title="NEXT (TS)" %}
At present, Firebase requires you to set a secret in the following file. For more details, refer to Firebase here: <https://firebase.google.com/docs/reference/rest/auth>

1. Set Firebase Config in .env

{% code title=".env" %}

```typescript
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=
```

{% endcode %}

2. **Change AuthProvider**

{% code title="src/store/ProviderWrapper.tsx" %}

```typescript
// Replace at line 27
import { FirebaseProvider as AuthProvider } from 'contexts/FirebaseContext';
```

{% endcode %}

3. **Change auth Hooks**
   1. Comment out another context in the following file and uncomment the Firebase one.

{% code title="src\hooks\useAuth.ts" %}

```typescript
import AuthContext from 'contexts/FirebaseContext';
```

{% endcode %}

4. Change Auth Login Method

{% code title="src/config.ts" %}

```typescript
export const APP_AUTH: AuthProvider = AuthProvider.FIREBASE;
```

{% endcode %}
{% endtab %}

{% tab title="NEXT (JS)" %}
At present, Firebase requires you to set a secret in the following file. For more details, refer to Firebase here: <https://firebase.google.com/docs/reference/rest/auth>

1. Set Firebase Config in .env

{% code title=".env" %}

```javascript
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=
```

{% endcode %}

2. **Change AuthProvider**

{% code title="src/store/ProviderWrapper.jsx" %}

```javascript
// Replace at line 27
import { FirebaseProvider as AuthProvider } from 'contexts/FirebaseContext';
```

{% endcode %}

3. **Change auth Hooks**
   1. Comment out another context in the following file and uncomment the Firebase one.

{% code title="src\hooks\useAuth.js" %}

```javascript
import AuthContext from 'contexts/FirebaseContext';
```

{% endcode %}

4. Change Auth Login Method

{% code title="src/config.js" %}

```javascript
export const APP_AUTH: AuthProvider = AuthProvider.FIREBASE;
```

{% endcode %}
{% endtab %}
{% endtabs %}