# Switch to Firebase

{% tabs %}
{% tab title="VITE(TS)" %}

### **JWT to Firebase**

1. **Set Firebase Config**

&#x20;     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>

{% code title=".env" %}

```typescript
...
###
## Firebase - Google Auth 

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 Config**

{% code title="src\config.Js" %}

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

{% endcode %}

3. **Change AuthProvider**

&#x20;      Comment out another provider in the following file and uncomment the Firebase one.

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

```typescript
import { FirebaseProvider as AuthProvider } from 'contexts/FirebaseContext';
```

{% endcode %}

4. **Change Auth Hooks**

&#x20;     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 %}
{% endtab %}

{% tab title="VITE(JS)" %}

### **JWT to Firebase**

1. **Set Firebase Config**

&#x20;     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>

{% code title=".env" %}

```javascript
...
###
## Firebase - Google Auth 

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 Config**

{% code title="src\config.Js" %}

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

{% endcode %}

3. **Change AuthProvider**

&#x20;      Comment out another provider in the following file and uncomment the Firebase one.

{% code title="src/App.Jsx" %}

```javascript
import { FirebaseProvider as AuthProvider } from 'contexts/FirebaseContext';
```

{% endcode %}

4. **Change Auth Hooks**

&#x20;     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 %}
{% endtab %}

{% tab title="NEXT(TS)" %}
{% hint style="info" %}
**For NextJS**, refer next-auth site: [`https://authjs.dev/reference/core/providers_google`](https://authjs.dev/reference/core/providers_google)
{% endhint %}
{% endtab %}

{% tab title="NEXT(JS)" %}
{% hint style="info" %}
**For NextJS**, refer next-auth site: [`https://authjs.dev/reference/core/providers_google`](https://authjs.dev/reference/core/providers_google)
{% endhint %}
{% endtab %}
{% endtabs %}