> For the complete documentation index, see [llms.txt](https://phoenixcoded.gitbook.io/able-pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://phoenixcoded.gitbook.io/able-pro/react/authentication/switch-to-firebase.md).

# Switch to Firebase

### JWT to **Firebase**

1. **Set Firebase Config**

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

{% tabs %}
{% tab title="VITE (TS)" %}
{% code title="src/config.ts" %}

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

{% endcode %}
{% endtab %}

{% tab title="VITE (JS)" %}
{% code title="src/config.js" %}

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

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

3. **Change AuthProvider**

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

{% tabs %}
{% tab title="VITE (TS)" %}
{% code title="src/App.tsx" %}

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

{% endcode %}
{% endtab %}

{% tab title="VITE (JS)" %}
{% code title="src/App.jsx" %}

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

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

4. **Change auth Hooks**

Comment out another context in the following file and uncomment the Firebase one.

{% tabs %}
{% tab title="VITE (TS)" %}
{% code title="src/hook/useAuth.ts" %}

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

{% endcode %}
{% endtab %}

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

<pre class="language-javascript" data-title="src/hook/useAuth.js"><code class="lang-javascript"><strong>import AuthContext from 'contexts/FirebaseContext';
</strong></code></pre>

{% endtab %}
{% endtabs %}