diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts
index 8d08dffdb..2cb2ddd3f 100644
--- a/src/lib/stores/oauth-providers.ts
+++ b/src/lib/stores/oauth-providers.ts
@@ -1,6 +1,4 @@
-import type { Models } from '@appwrite.io/console';
 import type { SvelteComponent } from 'svelte';
-import { writable } from 'svelte/store';
 import Apple from '../../routes/console/project-[project]/auth/(providers)/appleOAuth.svelte';
 import Auth0 from '../../routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte';
 import Authentik from '../../routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte';
@@ -11,176 +9,240 @@ import Microsoft from '../../routes/console/project-[project]/auth/(providers)/m
 import Oidc from '../../routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte';
 import Okta from '../../routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte';
 
-export type Provider = Models.AuthProvider & {
+export type Provider = {
+    name: string;
     icon: string;
     docs?: string;
-    component?: typeof SvelteComponent<unknown>;
+    component: typeof SvelteComponent<unknown>;
 };
 
-export type Providers = {
-    providers: Provider[];
+export const oAuthProviders: Record<string, Provider> = {
+    amazon: {
+        name: 'Amazon',
+        icon: 'amazon',
+        docs: 'https://developer.amazon.com/apps-and-games/services-and-apis',
+        component: Main
+    },
+    apple: {
+        name: 'Apple',
+        icon: 'apple',
+        docs: 'https://developer.apple.com/',
+        component: Apple
+    },
+    auth0: {
+        name: 'Auth0',
+        icon: 'auth0',
+        docs: 'https://auth0.com/developers',
+        component: Auth0
+    },
+    authentik: {
+        name: 'Authentik',
+        icon: 'authentik',
+        docs: 'https://goauthentik.io/integrations/sources/oauth/',
+        component: Authentik
+    },
+    autodesk: {
+        name: 'Autodesk',
+        icon: 'autodesk',
+        docs: 'https://forge.autodesk.com/en/docs/oauth/v2/developers_guide/overview/',
+        component: Main
+    },
+    bitbucket: {
+        name: 'Bitbucket',
+        icon: 'bitbucket',
+        docs: 'https://developer.atlassian.com/bitbucket',
+        component: Main
+    },
+    bitly: {
+        name: 'Bitly',
+        icon: 'bitly',
+        docs: 'https://dev.bitly.com/v4_documentation.html',
+        component: Main
+    },
+    box: {
+        name: 'Box',
+        icon: 'box',
+        docs: 'https://developer.box.com/reference/',
+        component: Main
+    },
+    dailymotion: {
+        name: 'Dailymotion',
+        icon: 'dailymotion',
+        docs: 'https://developers.dailymotion.com/api/',
+        component: Main
+    },
+    discord: {
+        name: 'Discord',
+        icon: 'discord',
+        docs: 'https://discordapp.com/developers/docs/topics/oauth2',
+        component: Main
+    },
+    disqus: {
+        name: 'Disqus',
+        icon: 'disqus',
+        docs: 'https://disqus.com/api/docs/auth/',
+        component: Main
+    },
+    dropbox: {
+        name: 'Dropbox',
+        icon: 'dropbox',
+        docs: 'https://www.dropbox.com/developers/documentation',
+        component: Main
+    },
+    etsy: {
+        name: 'Etsy',
+        icon: 'etsy',
+        docs: 'https://developers.etsy.com/',
+        component: Main
+    },
+    facebook: {
+        name: 'Facebook',
+        icon: 'facebook',
+        docs: 'https://developers.facebook.com/',
+        component: Main
+    },
+    github: {
+        name: 'GitHub',
+        icon: 'github',
+        docs: 'https://developer.github.com',
+        component: Main
+    },
+    gitlab: {
+        name: 'GitLab',
+        icon: 'gitlab',
+        docs: 'https://docs.gitlab.com/ee/api/',
+        component: GitLab
+    },
+    google: {
+        name: 'Google',
+        icon: 'google',
+        docs: 'https://support.google.com/googleapi/answer/6158849',
+        component: Google
+    },
+    linkedin: {
+        name: 'LinkedIn',
+        icon: 'linkedin',
+        docs: 'https://developer.linkedin.com/',
+        component: Main
+    },
+    microsoft: {
+        name: 'Microsoft',
+        icon: 'microsoft',
+        docs: 'https://developer.microsoft.com/en-us/',
+        component: Microsoft
+    },
+    notion: {
+        name: 'Notion',
+        icon: 'notion',
+        docs: 'https://developers.notion.com/docs',
+        component: Main
+    },
+    oidc: {
+        name: 'OIDC',
+        icon: 'oidc',
+        docs: 'https://openid.net/connect/faq/',
+        component: Oidc
+    },
+    okta: {
+        name: 'Okta',
+        icon: 'okta',
+        docs: 'https://developer.okta.com',
+        component: Okta
+    },
+    paypal: {
+        name: 'Paypal',
+        icon: 'paypal',
+        docs: 'https://developer.paypal.com/docs/api/overview/',
+        component: Main
+    },
+    paypalsandbox: {
+        name: 'Paypal Sandbox',
+        icon: 'paypal',
+        docs: 'https://developer.paypal.com/docs/api/overview/',
+        component: Main
+    },
+    podio: {
+        name: 'Podio',
+        icon: 'podio',
+        docs: 'https://developers.podio.com/doc/oauth-authorization',
+        component: Main
+    },
+    salesforce: {
+        name: 'Salesforce',
+        icon: 'salesforce',
+        docs: 'https://developer.salesforce.com/docs/',
+        component: Main
+    },
+    slack: {
+        name: 'Slack',
+        icon: 'slack',
+        docs: 'https://api.slack.com/',
+        component: Main
+    },
+    spotify: {
+        name: 'Spotify',
+        icon: 'spotify',
+        docs: 'https://developer.spotify.com/documentation/general/guides/authorization-guide/',
+        component: Main
+    },
+    stripe: {
+        name: 'Stripe',
+        icon: 'stripe',
+        docs: 'https://stripe.com/docs/api',
+        component: Main
+    },
+    tradeshift: {
+        name: 'Tradeshift',
+        icon: 'tradeshift',
+        docs: 'https://developers.tradeshift.com/docs/api',
+        component: Main
+    },
+    tradeshiftBox: {
+        name: 'Tradeshift Sandbox',
+        icon: 'tradeshift',
+        docs: 'https://developers.tradeshift.com/docs/api',
+        component: Main
+    },
+    twitch: {
+        name: 'Twitch',
+        icon: 'twitch',
+        docs: 'https://dev.twitch.tv/docs/auth',
+        component: Main
+    },
+    wordpress: {
+        name: 'Wordpress',
+        icon: 'wordpress',
+        docs: 'https://developer.wordpress.com/docs/oauth2/',
+        component: Main
+    },
+    yahoo: {
+        name: 'Yahoo',
+        icon: 'yahoo',
+        docs: 'https://developer.yahoo.com/oauth2/guide/flows_authcode/',
+        component: Main
+    },
+    yammer: {
+        name: 'Yammer',
+        icon: 'yammer',
+        docs: 'https://developer.yammer.com/docs/oauth-2',
+        component: Main
+    },
+    yandex: {
+        name: 'Yandex',
+        icon: 'yandex',
+        docs: 'https://tech.yandex.com/oauth/',
+        component: Main
+    },
+    zoho: {
+        name: 'Zoho',
+        icon: 'zoho',
+        docs: 'https://www.zoho.com/crm/developer/docs/api/oauth-overview.html',
+        component: Main
+    },
+    zoom: {
+        name: 'Zoom',
+        icon: 'zoom',
+        docs: 'https://marketplace.zoom.us/docs/guides/auth/oauth/',
+        component: Main
+    }
 };
-
-const setProviders = (project: Models.Project): Provider[] => {
-    return (
-        project?.oAuthProviders.map((n) => {
-            let docs: Provider['docs'];
-            let icon: Provider['icon'] = n.key.toLowerCase();
-            let component: Provider['component'] = Main;
-
-            switch (n.key.toLowerCase()) {
-                case 'amazon':
-                    docs = 'https://developer.amazon.com/apps-and-games/services-and-apis';
-                    break;
-                case 'apple':
-                    docs = 'https://developer.apple.com/';
-                    component = Apple;
-                    break;
-                case 'auth0':
-                    docs = 'https://auth0.com/developers';
-                    component = Auth0;
-                    break;
-                case 'authentik':
-                    docs = 'https://goauthentik.io/integrations/sources/oauth/';
-                    component = Authentik;
-                    break;
-                case 'autodesk':
-                    docs = 'https://forge.autodesk.com/en/docs/oauth/v2/developers_guide/overview/';
-                    break;
-                case 'bitbucket':
-                    docs = 'https://developer.atlassian.com/bitbucket';
-                    break;
-                case 'bitly':
-                    docs = 'https://dev.bitly.com/v4_documentation.html';
-                    break;
-                case 'box':
-                    docs = 'https://developer.box.com/reference/';
-                    break;
-                case 'dailymotion':
-                    docs = 'https://developers.dailymotion.com/api/';
-                    break;
-                case 'discord':
-                    docs = 'https://discordapp.com/developers/docs/topics/oauth2';
-                    break;
-                case 'disqus':
-                    docs = 'https://disqus.com/api/docs/auth/';
-                    break;
-                case 'dropbox':
-                    docs = 'https://www.dropbox.com/developers/documentation';
-                    break;
-                case 'etsy':
-                    docs = 'https://developers.etsy.com/';
-                    break;
-                case 'facebook':
-                    docs = 'https://developers.facebook.com/';
-                    break;
-                case 'github':
-                    docs = 'https://developer.github.com';
-                    break;
-                case 'gitlab':
-                    docs = 'https://docs.gitlab.com/ee/api/';
-                    component = GitLab;
-                    break;
-                case 'google':
-                    docs = 'https://support.google.com/googleapi/answer/6158849';
-                    component = Google;
-                    break;
-                case 'linkedin':
-                    docs = 'https://developer.linkedin.com/';
-                    break;
-                case 'microsoft':
-                    docs = 'https://developer.microsoft.com/en-us/';
-                    component = Microsoft;
-                    break;
-                case 'notion':
-                    docs = 'https://developers.notion.com/docs';
-                    break;
-                case 'oidc':
-                    docs = 'https://openid.net/connect/faq/';
-                    component = Oidc;
-                    break;
-                case 'okta':
-                    docs = 'https://developer.okta.com';
-                    component = Okta;
-                    break;
-                case 'paypal':
-                    docs = 'https://developer.paypal.com/docs/api/overview/';
-                    break;
-                case 'paypalsandbox':
-                    icon = 'paypal';
-                    docs = 'https://developer.paypal.com/docs/api/overview/';
-                    break;
-                case 'podio':
-                    docs = 'https://developers.podio.com/doc/oauth-authorization';
-                    break;
-                case 'salesforce':
-                    docs = 'https://developer.salesforce.com/docs/';
-                    break;
-                case 'slack':
-                    docs = 'https://api.slack.com/';
-                    break;
-                case 'spotify':
-                    docs =
-                        'https://developer.spotify.com/documentation/general/guides/authorization-guide/';
-                    break;
-                case 'stripe':
-                    docs = 'https://stripe.com/docs/api';
-                    break;
-                case 'tradeshift':
-                    docs = 'https://developers.tradeshift.com/docs/api';
-                    break;
-                case 'tradeshiftbox':
-                    icon = 'tradeshift';
-                    docs = 'https://developers.tradeshift.com/docs/api';
-                    break;
-                case 'twitch':
-                    docs = 'https://dev.twitch.tv/docs/auth';
-                    break;
-                case 'wordpress':
-                    docs = 'https://developer.wordpress.com/docs/oauth2/';
-                    break;
-                case 'yahoo':
-                    docs = 'https://developer.yahoo.com/oauth2/guide/flows_authcode/';
-                    break;
-                case 'yammer':
-                    docs = 'https://developer.yammer.com/docs/oauth-2';
-                    break;
-                case 'yandex':
-                    docs = 'https://tech.yandex.com/oauth/';
-                    break;
-                case 'zoho':
-                    docs = 'https://www.zoho.com/accounts/protocol/oauth/sign-in-using-zoho.html';
-                    break;
-                case 'zoom':
-                    docs = 'https://marketplace.zoom.us/docs/guides/auth/oauth/';
-                    break;
-                default:
-                    break;
-            }
-
-            return {
-                ...n,
-                icon,
-                docs,
-                component
-            };
-        }) ?? []
-    );
-};
-
-function createOAuthProviders() {
-    const { subscribe, set } = writable<Providers>({
-        providers: setProviders(null)
-    });
-    return {
-        subscribe,
-        set,
-        load: (project: Models.Project) => {
-            const providers = setProviders(project);
-
-            set({ providers });
-        }
-    };
-}
-
-export const OAuthProviders = createOAuthProviders();
diff --git a/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte
index 982422b3f..2d34598f5 100644
--- a/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte
@@ -2,14 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputSwitch, InputText, InputTextarea } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
     const projectId = $page.params.project;
 
-    export let provider: Provider;
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -18,11 +19,13 @@
     let teamID: string = null;
     let p8: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ keyID, teamID, p8 } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     const update = async () => {
@@ -44,7 +47,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer">
                 visit the docs.
             </a>
         </p>
diff --git a/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte
index 0607180a5..26ae7296e 100644
--- a/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte
@@ -2,12 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
-    export let provider: Provider;
+    const projectId = $page.params.project;
+
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -15,14 +18,15 @@
     let clientSecret: string = null;
     let auth0Domain: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ clientSecret, auth0Domain } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
-    const projectId = $page.params.project;
     const update = async () => {
         const result = await updateOAuth({ projectId, provider, secret, appId, enabled });
 
@@ -45,7 +49,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte
index f7d6dcd37..e6b99f2b4 100644
--- a/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte
@@ -2,12 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
-    export let provider: Provider;
+    const projectId = $page.params.project;
+
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -15,14 +18,15 @@
     let clientSecret: string = null;
     let authentikDomain: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ clientSecret, authentikDomain } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
-    const projectId = $page.params.project;
     const update = async () => {
         const result = await updateOAuth({ projectId, provider, secret, appId, enabled });
 
@@ -45,7 +49,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte
index 95f80675e..dc1dd71a4 100644
--- a/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte
@@ -2,12 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
-    export let provider: Provider;
+    const projectId = $page.params.project;
+
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -15,14 +18,15 @@
     let clientSecret: string = null;
     let endpoint: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ clientSecret, endpoint } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
-    const projectId = $page.params.project;
     const update = async () => {
         const result = await updateOAuth({ projectId, provider, secret, appId, enabled });
 
@@ -43,7 +47,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte
index defd59038..9ddfdb74f 100644
--- a/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte
@@ -2,24 +2,27 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
-
-    export let provider: Provider;
-    export let show = false;
+    import type { Models } from '@appwrite.io/console';
 
     const projectId = $page.params.project;
 
+    export let provider: Models.AuthProvider;
+    export let show = false;
+
     let enabled: boolean = null;
     let appId: string = null;
     let secret: string = null;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         enabled ??= provider.enabled;
         appId ??= provider.appId;
         secret ??= provider.secret;
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     let error: string;
@@ -41,7 +44,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte
index 184fcd00c..0e38ff2e6 100644
--- a/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte
@@ -2,24 +2,27 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
-
-    export let provider: Provider;
-    export let show = false;
+    import type { Models } from '@appwrite.io/console';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
 
     const projectId = $page.params.project;
 
+    export let provider: Models.AuthProvider;
+    export let show = false;
+
     let enabled: boolean = null;
     let appId: string = null;
     let secret: string = null;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         enabled ??= provider.enabled;
         appId ??= provider.appId;
         secret ??= provider.secret;
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     let error: string;
@@ -41,7 +44,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte
index 7fd451af5..8df2259fc 100644
--- a/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte
@@ -2,12 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
-    export let provider: Provider;
+    const projectId = $page.params.project;
+
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -15,15 +18,15 @@
     let clientSecret: string = null;
     let tenantID: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ clientSecret, tenantID } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
-    const projectId = $page.params.project;
-
     const update = async () => {
         const result = await updateOAuth({ projectId, provider, secret, appId, enabled });
 
@@ -44,7 +47,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer">
                 visit the docs.
             </a>
         </p>
diff --git a/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte
index f00f07e30..0c6565f19 100644
--- a/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte
@@ -2,14 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
     const projectId = $page.params.project;
 
-    export let provider: Provider;
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -20,6 +21,7 @@
     let tokenEndpoint: string = null;
     let userinfoEndpoint: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     // secret is valid if clientSecret is set and either wellKnownEndpoint or all of the other endpoints are set
     $: isValidSecret =
@@ -38,6 +40,7 @@
                 userinfoEndpoint
             } = JSON.parse(provider.secret));
         }
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     const update = async () => {
@@ -67,7 +70,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte
index 6e23ca60c..3f73d9d13 100644
--- a/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte
@@ -2,14 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
     const projectId = $page.params.project;
 
-    export let provider: Provider;
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -18,6 +19,7 @@
     let oktaDomain: string = null;
     let authorizationServerId: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
@@ -25,6 +27,7 @@
         if (provider.secret) {
             ({ clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret));
         }
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     const update = async () => {
@@ -49,7 +52,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/settings/+page.svelte b/src/routes/console/project-[project]/auth/settings/+page.svelte
index 610733117..50ec182c4 100644
--- a/src/routes/console/project-[project]/auth/settings/+page.svelte
+++ b/src/routes/console/project-[project]/auth/settings/+page.svelte
@@ -8,18 +8,15 @@
     import { app } from '$lib/stores/app';
     import { authMethods, type AuthMethod } from '$lib/stores/auth-methods';
     import { addNotification } from '$lib/stores/notifications';
-    import type { Provider } from '$lib/stores/oauth-providers';
-    import { OAuthProviders } from '$lib/stores/oauth-providers';
+    import { oAuthProviders } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
     import { project } from '../../store';
 
     const projectId = $page.params.project;
     let showProvider = false;
 
-    $: {
-        authMethods.load($project);
-        OAuthProviders.load($project);
-    }
+    let selectedProvider: Models.AuthProvider | null = null;
 
     async function authUpdate(box: AuthMethod) {
         try {
@@ -42,10 +39,10 @@
         }
     }
 
-    let selectedProvider: Provider | null = null;
+    $: authMethods.load($project);
 </script>
 
-{#if $authMethods && $OAuthProviders}
+{#if $authMethods && $project}
     <Container>
         <CardGrid>
             <Heading tag="h2" size="7">Auth methods</Heading>
@@ -67,34 +64,37 @@
         <section class="common-section">
             <h2 class="heading-level-6 common-section">OAuth2 Providers</h2>
             <ul class="grid-box common-section">
-                {#each $OAuthProviders.providers
+                {#each $project.oAuthProviders
                     .filter((p) => p.name !== 'Mock')
                     .sort((a, b) => (a.enabled === b.enabled ? 0 : a.enabled ? -1 : 1)) as provider}
-                    <li class="grid-box-item">
-                        <button
-                            class="card u-flex u-flex-vertical u-cross-center u-width-full-line"
-                            on:click={() => {
-                                selectedProvider = provider;
-                                showProvider = true;
-                                trackEvent(`click_select_provider`, {
-                                    provider: provider.key.toLowerCase()
-                                });
-                            }}>
-                            <div class="avatar">
-                                <img
-                                    height="20"
-                                    width="20"
-                                    src={`/icons/${$app.themeInUse}/color/${provider.icon}.svg`}
-                                    alt={provider.name} />
-                            </div>
-                            <p class="u-margin-block-start-8">{provider.name}</p>
-                            <div class="u-margin-block-start-24">
-                                <Pill success={provider.enabled}>
-                                    {provider.enabled ? 'enabled' : 'disabled'}
-                                </Pill>
-                            </div>
-                        </button>
-                    </li>
+                    {@const oAuthProvider = oAuthProviders[provider.key]}
+                    {#if oAuthProvider}
+                        <li class="grid-box-item">
+                            <button
+                                class="card u-flex u-flex-vertical u-cross-center u-width-full-line"
+                                on:click={() => {
+                                    selectedProvider = provider;
+                                    showProvider = true;
+                                    trackEvent(`click_select_provider`, {
+                                        provider: provider.key.toLowerCase()
+                                    });
+                                }}>
+                                <div class="avatar">
+                                    <img
+                                        height="20"
+                                        width="20"
+                                        src={`/icons/${$app.themeInUse}/color/${oAuthProvider.icon}.svg`}
+                                        alt={provider.name} />
+                                </div>
+                                <p class="u-margin-block-start-8">{provider.name}</p>
+                                <div class="u-margin-block-start-24">
+                                    <Pill success={provider.enabled}>
+                                        {provider.enabled ? 'enabled' : 'disabled'}
+                                    </Pill>
+                                </div>
+                            </button>
+                        </li>
+                    {/if}
                 {/each}
             </ul>
         </section>
@@ -102,8 +102,9 @@
 {/if}
 
 {#if selectedProvider && showProvider}
+    {@const oAuthProvider = oAuthProviders[selectedProvider.key]}
     <svelte:component
-        this={selectedProvider.component}
+        this={oAuthProvider.component}
         bind:provider={selectedProvider}
         bind:show={showProvider}
         on:close={() => {
diff --git a/src/routes/console/project-[project]/auth/updateOAuth.ts b/src/routes/console/project-[project]/auth/updateOAuth.ts
index dade0a767..5ada36747 100644
--- a/src/routes/console/project-[project]/auth/updateOAuth.ts
+++ b/src/routes/console/project-[project]/auth/updateOAuth.ts
@@ -3,13 +3,12 @@ import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
 import { Dependencies } from '$lib/constants';
 import { isValueOfStringEnum } from '$lib/helpers/types';
 import { addNotification } from '$lib/stores/notifications';
-import type { Provider } from '$lib/stores/oauth-providers';
 import { sdk } from '$lib/stores/sdk';
-import { OAuthProvider } from '@appwrite.io/console';
+import { OAuthProvider, type Models } from '@appwrite.io/console';
 
 type Args = {
     projectId: string;
-    provider: Provider;
+    provider: Models.AuthProvider;
     appId: string;
     secret: string;
     enabled: boolean;
diff --git a/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte b/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte
index 1d62ab264..841db0487 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte
@@ -20,8 +20,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { invalidate } from '$app/navigation';
     import type { Column } from '$lib/helpers/types';
-    import { OAuthProviders, type Provider } from '$lib/stores/oauth-providers';
-    import { project } from '$routes/console/project-[project]/store';
+    import { oAuthProviders } from '$lib/stores/oauth-providers';
     import { app } from '$lib/stores/app';
 
     export let columns: Column[];
@@ -30,7 +29,6 @@
     let selectedIds: string[] = [];
     let showDelete = false;
     let deleting = false;
-    let providerLookup: Record<string, Provider> = {};
 
     async function handleDelete() {
         showDelete = false;
@@ -58,12 +56,6 @@
             showDelete = false;
         }
     }
-
-    $: OAuthProviders.load($project);
-    $: providerLookup = $OAuthProviders.providers.reduce((acc, provider) => {
-        acc[provider.key] = provider;
-        return acc;
-    }, {});
 </script>
 
 <TableScroll>
@@ -93,7 +85,7 @@
                                 </TableCell>
                             {/key}
                         {:else if column.id === 'provider'}
-                            {@const provider = providerLookup[identity[column.id]]}
+                            {@const provider = oAuthProviders[identity[column.id]]}
                             <TableCellText title={column.title} width={column.width}>
                                 <div class="u-inline-flex u-cross-center u-gap-8">
                                     <div class="avatar is-size-small">