diff --git a/src/lib/stores/auth-methods.ts b/src/lib/stores/auth-methods.ts
index 2f8d50f13..c26a3e3cc 100644
--- a/src/lib/stores/auth-methods.ts
+++ b/src/lib/stores/auth-methods.ts
@@ -7,78 +7,51 @@ export type AuthMethod = {
     value: boolean | null;
 };
 
+const setAuthMethod = (project: Models.Project): AuthMethod[] => {
+    return [
+        {
+            label: 'Email/Password',
+            method: 'email-password',
+            value: project?.authEmailPassword
+        },
+        {
+            label: 'Phone',
+            method: 'phone',
+            value: project?.authPhone
+        },
+        {
+            label: 'Magic URL',
+            method: 'magic-url',
+            value: project?.authUsersAuthMagicURL
+        },
+        {
+            label: 'Anonymous',
+            method: 'anonymous',
+            value: project?.authAnonymous
+        },
+        {
+            label: 'Team Invites',
+            method: 'invites',
+            value: project?.authInvites
+        },
+        {
+            label: 'JWT',
+            method: 'jwt',
+            value: project?.authJWT
+        }
+    ];
+};
+
 function createAuthMethods() {
     const { subscribe, set } = writable({
-        list: [
-            {
-                label: 'Email/Password',
-                method: 'email-password',
-                value: null
-            },
-            {
-                label: 'Phone',
-                method: 'phone',
-                value: null
-            },
-            {
-                label: 'Magic URL',
-                method: 'magic-url',
-                value: null
-            },
-            {
-                label: 'Anonymous',
-                method: 'anonymous',
-                value: null
-            },
-            {
-                label: 'Invites',
-                method: 'invites',
-                value: null
-            },
-            {
-                label: 'JWT',
-                method: 'jwt',
-                value: null
-            }
-        ]
+        list: setAuthMethod(null)
     });
 
     return {
         subscribe,
         set,
         load: (project: Models.Project) => {
-            const list = [
-                {
-                    label: 'Email/Password',
-                    method: 'email-password',
-                    value: project.authEmailPassword
-                },
-                {
-                    label: 'Phone',
-                    method: 'phone',
-                    value: project.authPhone
-                },
-                {
-                    label: 'Magic URL',
-                    method: 'magic-url',
-                    value: project.authUsersAuthMagicURL
-                },
-                {
-                    label: 'Anonymous',
-                    method: 'anonymous',
-                    value: project.authAnonymous
-                },
-                {
-                    label: 'Team Invites',
-                    method: 'invites',
-                    value: project.authInvites
-                },
-                {
-                    label: 'JWT',
-                    method: 'jwt',
-                    value: project.authJWT
-                }
-            ];
+            const list = setAuthMethod(project);
             set({ list });
         }
     };
diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts
index 920263e96..7b3f87d5f 100644
--- a/src/lib/stores/oauth-providers.ts
+++ b/src/lib/stores/oauth-providers.ts
@@ -21,560 +21,292 @@ export type Providers = {
     providers: Provider[];
 };
 
+const setProviders = (project: Models.Project): Provider[] => {
+    return [
+        {
+            name: 'Amazon',
+            icon: 'amazon',
+            active: false,
+            id: project?.providerAmazonAppid,
+            secret: project?.providerAmazonSecret,
+            docs: 'https://developer.amazon.com/apps-and-games/services-and-apis',
+            component: Main
+        },
+        {
+            name: 'Apple',
+            icon: 'apple',
+            active: false,
+            id: project?.providerAppleAppid,
+            secret: project?.providerAppleSecret,
+            docs: 'https://developer.apple.com/',
+            component: Apple
+        },
+        {
+            name: 'Auth0',
+            icon: 'auth0',
+            active: false,
+            id: project?.providerAuth0Appid,
+            secret: project?.providerAuth0Secret,
+            docs: 'https://auth0.com/developers',
+            component: Auth0
+        },
+        {
+            name: 'Bitbucket',
+            icon: 'bitBucket',
+            active: false,
+            id: project?.providerBitbucketAppid,
+            secret: project?.providerBitbucketSecret,
+            docs: 'https://developer.atlassian.com/bitbucket',
+            component: Main
+        },
+        {
+            name: 'Bitly',
+            icon: 'bitly',
+            active: false,
+            id: project?.providerBitlyAppid,
+            secret: project?.providerBitlySecret,
+            docs: 'https://dev.bitly.com/v4_documentation.html',
+            component: Main
+        },
+        {
+            name: 'Box',
+            icon: 'box',
+            active: false,
+            id: project?.providerBoxAppid,
+            secret: project?.providerBoxSecret,
+            docs: 'https://developer.box.com/reference/',
+            component: Main
+        },
+        {
+            name: 'Discord',
+            icon: 'discord',
+            active: false,
+            id: project?.providerDiscordAppid,
+            secret: project?.providerDiscordSecret,
+            docs: 'https://discordapp.com/developers/docs/topics/oauth2',
+            component: Main
+        },
+        {
+            name: 'Dropbox',
+            icon: 'dropbox',
+            active: false,
+            id: project?.providerDropboxAppid,
+            secret: project?.providerDropboxSecret,
+            docs: 'https://www.dropbox.com/developers/documentation',
+            component: Main
+        },
+        {
+            name: 'Facebook',
+            icon: 'facebook',
+            active: false,
+            id: project?.providerFacebookAppid,
+            secret: project?.providerFacebookSecret,
+            docs: 'https://developers.facebook.com/',
+            component: Main
+        },
+        {
+            name: 'Github',
+            icon: 'github',
+            active: false,
+            id: project?.providerGithubAppid,
+            secret: project?.providerGithubSecret,
+            docs: 'https://developer.github.com/',
+            component: Main
+        },
+        {
+            name: 'Gitlab',
+            icon: 'gitlab',
+            active: false,
+            id: project?.providerGitlabAppid,
+            secret: project?.providerGitlabSecret,
+            docs: 'https://docs.gitlab.com/ee/api/',
+            component: Main
+        },
+        {
+            name: 'Google',
+            icon: 'google',
+            active: false,
+            id: project?.providerGoogleAppid,
+            secret: project?.providerGoogleSecret,
+            docs: 'https://support.google.com/googleapi/answer/6158849',
+            component: Main
+        },
+        {
+            name: 'Linkedin',
+            icon: 'linkedin',
+            active: false,
+            id: project?.providerLinkedinAppid,
+            secret: project?.providerLinkedinSecret,
+            docs: 'https://developer.linkedin.com/',
+            component: Main
+        },
+        {
+            name: 'Microsoft',
+            icon: 'microsoft',
+            active: false,
+            id: project?.providerMicrosoftAppid,
+            secret: project?.providerMicrosoftSecret,
+            docs: 'https://developer.microsoft.com/en-us/',
+            component: Microsoft
+        },
+        {
+            name: 'Notion',
+            icon: 'notion',
+            active: false,
+            id: project?.providerNotionAppid,
+            secret: project?.providerNotionSecret,
+            docs: 'https://developers.notion.com/docs',
+            component: Main
+        },
+        {
+            name: 'Okta',
+            icon: 'okta',
+            active: false,
+            id: project?.providerOktaAppid,
+            secret: project?.providerOktaSecret,
+            docs: 'https://developer.okta.com/',
+            component: Okta
+        },
+        {
+            name: 'Paypal',
+            icon: 'paypal',
+            active: false,
+            id: project?.providerPaypalAppid,
+            secret: project?.providerPaypalSecret,
+            docs: 'https://developer.paypal.com/docs/api/overview/',
+            component: Main
+        },
+        {
+            name: 'Paypal (sandbox)',
+            icon: 'paypal',
+            active: false,
+            id: project?.providerPaypalSandboxAppid,
+            secret: project?.providerPaypalSandboxSecret,
+            docs: 'https://developer.paypal.com/docs/api/overview/',
+            component: Main
+        },
+        {
+            name: 'Salesforce',
+            icon: 'salesforce',
+            active: false,
+            id: project?.providerSalesforceAppid,
+            secret: project?.providerSalesforceSecret,
+            docs: 'https://developer.salesforce.com/docs/',
+            component: Main
+        },
+        {
+            name: 'Slack',
+            icon: 'slack',
+            active: false,
+            id: project?.providerSlackAppid,
+            secret: project?.providerSlackSecret,
+            docs: 'https://api.slack.com/',
+            component: Main
+        },
+        {
+            name: 'Spotify',
+            icon: 'spotify',
+            active: false,
+            id: project?.providerSpotifyAppid,
+            secret: project?.providerSpotifySecret,
+            docs: 'https://developer.spotify.com/documentation/general/guides/authorization-guide/',
+            component: Main
+        },
+        {
+            name: 'Stripe',
+            icon: 'stripe',
+            active: false,
+            id: project?.providerStripeAppid,
+            secret: project?.providerStripeSecret,
+            docs: 'https://stripe.com/docs/api',
+            component: Main
+        },
+        {
+            name: 'Tradeshift',
+            icon: 'tradeshift',
+            active: false,
+            id: project?.providerTradeshiftAppid,
+            secret: project?.providerTradeshiftSecret,
+            docs: 'https://developers.tradeshift.com/docs/api',
+            component: Main
+        },
+        {
+            name: 'Tradeshift(sandbox)',
+            icon: 'tradeshift',
+            active: false,
+            id: project?.providerTradeshiftBoxAppid,
+            secret: project?.providerTradeshiftBoxSecret,
+            docs: 'https://developers.tradeshift.com/docs/api',
+            component: Main
+        },
+        {
+            name: 'Twitch',
+            icon: 'twitch',
+            active: false,
+            id: project?.providerTwitchAppid,
+            secret: project?.providerTwitchSecret,
+            docs: 'https://dev.twitch.tv/docs/authentication',
+            component: Main
+        },
+
+        {
+            name: 'Wordpress',
+            icon: 'wordpress',
+            active: false,
+            id: project?.providerWordpressAppid,
+            secret: project?.providerWordpressSecret,
+            docs: 'https://developer.wordpress.com/docs/oauth2/',
+            component: Main
+        },
+        {
+            name: 'Yahoo',
+            icon: 'yahoo',
+            active: false,
+            id: project?.providerYahooAppid,
+            secret: project?.providerYahooSecret,
+            docs: 'https://developer.yahoo.com/oauth2/guide/flows_authcode/',
+            component: Main
+        },
+        {
+            name: 'Yammer',
+            icon: 'ms_yammer',
+            active: false,
+            id: project?.providerYammerAppid,
+            secret: project?.providerYammerSecret,
+            docs: 'https://developer.yammer.com/docs/oauth-2',
+            component: Main
+        },
+        {
+            name: 'Yandex',
+            icon: 'yandex',
+            active: false,
+            id: project?.providerYandexAppid,
+            secret: project?.providerYandexSecret,
+            docs: 'https://tech.yandex.com/oauth/',
+            component: Main
+        },
+        {
+            name: 'Zoom',
+            icon: 'zoom',
+            active: false,
+            id: project?.providerZoomAppid,
+            secret: project?.providerZoomSecret,
+            docs: 'https://marketplace.zoom.us/docs/guides/auth/oauth/',
+            component: Main
+        }
+    ];
+};
+
 function createOAuthProviders() {
     const { subscribe, set } = writable<Providers>({
-        providers: [
-            {
-                name: 'Amazon',
-                icon: 'amazon',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.amazon.com/apps-and-games/services-and-apis',
-                component: Main
-            },
-            {
-                name: 'Apple',
-                icon: 'apple',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.apple.com/',
-                component: Apple
-            },
-            {
-                name: 'Auth0',
-                icon: 'auth0',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://auth0.com/developers',
-                component: Auth0
-            },
-            {
-                name: 'Bitbucket',
-                icon: 'bitBucket',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.atlassian.com/bitbucket',
-                component: Main
-            },
-            {
-                name: 'Bitly',
-                icon: 'bitly',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://dev.bitly.com/v4_documentation.html',
-                component: Main
-            },
-            {
-                name: 'Box',
-                icon: 'box',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.box.com/reference/',
-                component: Main
-            },
-            {
-                name: 'Discord',
-                icon: 'discord',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://discordapp.com/developers/docs/topics/oauth2',
-                component: Main
-            },
-            {
-                name: 'Dropbox',
-                icon: 'dropbox',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://www.dropbox.com/developers/documentation',
-                component: Main
-            },
-            {
-                name: 'Facebook',
-                icon: 'facebook',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developers.facebook.com/',
-                component: Main
-            },
-            {
-                name: 'Github',
-                icon: 'github',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.github.com/',
-                component: Main
-            },
-            {
-                name: 'Gitlab',
-                icon: 'gitlab',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://docs.gitlab.com/ee/api/',
-                component: Main
-            },
-            {
-                name: 'Google',
-                icon: 'google',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://support.google.com/googleapi/answer/6158849',
-                component: Main
-            },
-            {
-                name: 'Linkedin',
-                icon: 'linkedin',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.linkedin.com/',
-                component: Main
-            },
-            {
-                name: 'Microsoft',
-                icon: 'microsoft',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.microsoft.com/en-us/',
-                component: Microsoft
-            },
-            {
-                name: 'Notion',
-                icon: 'notion',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developers.notion.com/docs',
-                component: Main
-            },
-            {
-                name: 'Okta',
-                icon: 'okta',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.okta.com/',
-                component: Okta
-            },
-            {
-                name: 'Paypal',
-                icon: 'paypal',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.paypal.com/docs/api/overview/',
-                component: Main
-            },
-            {
-                name: 'Paypal (sandbox)',
-                icon: 'paypal',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.paypal.com/docs/api/overview/',
-                component: Main
-            },
-            {
-                name: 'Salesforce',
-                icon: 'salesforce',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.salesforce.com/docs/',
-                component: Main
-            },
-            {
-                name: 'Slack',
-                icon: 'slack',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://api.slack.com/',
-                component: Main
-            },
-            {
-                name: 'Spotify',
-                icon: 'spotify',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.spotify.com/documentation/general/guides/authorization-guide/',
-                component: Main
-            },
-            {
-                name: 'Stripe',
-                icon: 'stripe',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://stripe.com/docs/api',
-                component: Main
-            },
-            {
-                name: 'Tradeshift',
-                icon: 'tradeshift',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developers.tradeshift.com/docs/api',
-                component: Main
-            },
-            {
-                name: 'Tradeshift(sandbox)',
-                icon: 'tradeshift',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developers.tradeshift.com/docs/api',
-                component: Main
-            },
-            {
-                name: 'Twitch',
-                icon: 'twitch',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://dev.twitch.tv/docs/authentication',
-                component: Main
-            },
-
-            {
-                name: 'Wordpress',
-                icon: 'wordpress',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.wordpress.com/docs/oauth2/',
-                component: Main
-            },
-            {
-                name: 'Yahoo',
-                icon: 'yahoo',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.yahoo.com/oauth2/guide/flows_authcode/',
-                component: Main
-            },
-            {
-                name: 'Yammer',
-                icon: 'ms_yammer',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://developer.yammer.com/docs/oauth-2',
-                component: Main
-            },
-            {
-                name: 'Yandex',
-                icon: 'yandex',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://tech.yandex.com/oauth/',
-                component: Main
-            },
-            {
-                name: 'Zoom',
-                icon: 'zoom',
-                active: false,
-                id: null,
-                secret: null,
-                docs: 'https://marketplace.zoom.us/docs/guides/auth/oauth/',
-                component: Main
-            }
-        ]
+        providers: setProviders(null)
     });
-
     return {
         subscribe,
         set,
         load: (project: Models.Project) => {
-            const providers: Provider[] = [
-                {
-                    name: 'Amazon',
-                    icon: 'amazon',
-                    active: false,
-                    id: project.providerAmazonAppid,
-                    secret: project.providerAmazonSecret,
-                    docs: 'https://developer.amazon.com/apps-and-games/services-and-apis',
-                    component: Main
-                },
-                {
-                    name: 'Apple',
-                    icon: 'apple',
-                    active: false,
-                    id: project.providerAppleAppid,
-                    secret: project.providerAppleSecret,
-                    docs: 'https://developer.apple.com/',
-                    component: Apple
-                },
-                {
-                    name: 'Auth0',
-                    icon: 'auth0',
-                    active: false,
-                    id: project.providerAuth0Appid,
-                    secret: project.providerAuth0Secret,
-                    docs: 'https://auth0.com/developers',
-                    component: Auth0
-                },
-                {
-                    name: 'Bitbucket',
-                    icon: 'bitBucket',
-                    active: false,
-                    id: project.providerBitbucketAppid,
-                    secret: project.providerBitbucketSecret,
-                    docs: 'https://developer.atlassian.com/bitbucket',
-                    component: Main
-                },
-                {
-                    name: 'Bitly',
-                    icon: 'bitly',
-                    active: false,
-                    id: project.providerBitlyAppid,
-                    secret: project.providerBitlySecret,
-                    docs: 'https://dev.bitly.com/v4_documentation.html',
-                    component: Main
-                },
-                {
-                    name: 'Box',
-                    icon: 'box',
-                    active: false,
-                    id: project.providerBoxAppid,
-                    secret: project.providerBoxSecret,
-                    docs: 'https://developer.box.com/reference/',
-                    component: Main
-                },
-                {
-                    name: 'Discord',
-                    icon: 'discord',
-                    active: false,
-                    id: project.providerDiscordAppid,
-                    secret: project.providerDiscordSecret,
-                    docs: 'https://discordapp.com/developers/docs/topics/oauth2',
-                    component: Main
-                },
-                {
-                    name: 'Dropbox',
-                    icon: 'dropbox',
-                    active: false,
-                    id: project.providerDropboxAppid,
-                    secret: project.providerDropboxSecret,
-                    docs: 'https://www.dropbox.com/developers/documentation',
-                    component: Main
-                },
-                {
-                    name: 'Facebook',
-                    icon: 'facebook',
-                    active: false,
-                    id: project.providerFacebookAppid,
-                    secret: project.providerFacebookSecret,
-                    docs: 'https://developers.facebook.com/',
-                    component: Main
-                },
-                {
-                    name: 'Github',
-                    icon: 'github',
-                    active: false,
-                    id: project.providerGithubAppid,
-                    secret: project.providerGithubSecret,
-                    docs: 'https://developer.github.com/',
-                    component: Main
-                },
-                {
-                    name: 'Gitlab',
-                    icon: 'gitlab',
-                    active: false,
-                    id: project.providerGitlabAppid,
-                    secret: project.providerGitlabSecret,
-                    docs: 'https://docs.gitlab.com/ee/api/',
-                    component: Main
-                },
-                {
-                    name: 'Google',
-                    icon: 'google',
-                    active: false,
-                    id: project.providerGoogleAppid,
-                    secret: project.providerGoogleSecret,
-                    docs: 'https://support.google.com/googleapi/answer/6158849',
-                    component: Main
-                },
-                {
-                    name: 'Linkedin',
-                    icon: 'linkedin',
-                    active: false,
-                    id: project.providerLinkedinAppid,
-                    secret: project.providerLinkedinSecret,
-                    docs: 'https://developer.linkedin.com/',
-                    component: Main
-                },
-                {
-                    name: 'Microsoft',
-                    icon: 'microsoft',
-                    active: false,
-                    id: project.providerMicrosoftAppid,
-                    secret: project.providerMicrosoftSecret,
-                    docs: 'https://developer.microsoft.com/en-us/',
-                    component: Microsoft
-                },
-                {
-                    name: 'Notion',
-                    icon: 'notion',
-                    active: false,
-                    id: project.providerNotionAppid,
-                    secret: project.providerNotionSecret,
-                    docs: 'https://developers.notion.com/docs',
-                    component: Main
-                },
-                {
-                    name: 'Okta',
-                    icon: 'okta',
-                    active: false,
-                    id: project.providerOktaAppid,
-                    secret: project.providerOktaSecret,
-                    docs: 'https://developer.okta.com/',
-                    component: Okta
-                },
-                {
-                    name: 'Paypal',
-                    icon: 'paypal',
-                    active: false,
-                    id: project.providerPaypalAppid,
-                    secret: project.providerPaypalSecret,
-                    docs: 'https://developer.paypal.com/docs/api/overview/',
-                    component: Main
-                },
-                {
-                    name: 'Paypal (sandbox)',
-                    icon: 'paypal',
-                    active: false,
-                    id: project.providerPaypalSandboxAppid,
-                    secret: project.providerPaypalSandboxSecret,
-                    docs: 'https://developer.paypal.com/docs/api/overview/',
-                    component: Main
-                },
-                {
-                    name: 'Salesforce',
-                    icon: 'salesforce',
-                    active: false,
-                    id: project.providerSalesforceAppid,
-                    secret: project.providerSalesforceSecret,
-                    docs: 'https://developer.salesforce.com/docs/',
-                    component: Main
-                },
-                {
-                    name: 'Slack',
-                    icon: 'slack',
-                    active: false,
-                    id: project.providerSlackAppid,
-                    secret: project.providerSlackSecret,
-                    docs: 'https://api.slack.com/',
-                    component: Main
-                },
-                {
-                    name: 'Spotify',
-                    icon: 'spotify',
-                    active: false,
-                    id: project.providerSpotifyAppid,
-                    secret: project.providerSpotifySecret,
-                    docs: 'https://developer.spotify.com/documentation/general/guides/authorization-guide/',
-                    component: Main
-                },
-                {
-                    name: 'Stripe',
-                    icon: 'stripe',
-                    active: false,
-                    id: project.providerStripeAppid,
-                    secret: project.providerStripeSecret,
-                    docs: 'https://stripe.com/docs/api',
-                    component: Main
-                },
-                {
-                    name: 'Tradeshift',
-                    icon: 'tradeshift',
-                    active: false,
-                    id: project.providerTradeshiftAppid,
-                    secret: project.providerTradeshiftSecret,
-                    docs: 'https://developers.tradeshift.com/docs/api',
-                    component: Main
-                },
-                {
-                    name: 'Tradeshift(sandbox)',
-                    icon: 'tradeshift',
-                    active: false,
-                    id: project.providerTradeshiftBoxAppid,
-                    secret: project.providerTradeshiftBoxSecret,
-                    docs: 'https://developers.tradeshift.com/docs/api',
-                    component: Main
-                },
-                {
-                    name: 'Twitch',
-                    icon: 'twitch',
-                    active: false,
-                    id: project.providerTwitchAppid,
-                    secret: project.providerTwitchSecret,
-                    docs: 'https://dev.twitch.tv/docs/authentication',
-                    component: Main
-                },
+            const providers = setProviders(project);
 
-                {
-                    name: 'Wordpress',
-                    icon: 'wordpress',
-                    active: false,
-                    id: project.providerWordpressAppid,
-                    secret: project.providerWordpressSecret,
-                    docs: 'https://developer.wordpress.com/docs/oauth2/',
-                    component: Main
-                },
-                {
-                    name: 'Yahoo',
-                    icon: 'yahoo',
-                    active: false,
-                    id: project.providerYahooAppid,
-                    secret: project.providerYahooSecret,
-                    docs: 'https://developer.yahoo.com/oauth2/guide/flows_authcode/',
-                    component: Main
-                },
-                {
-                    name: 'Yammer',
-                    icon: 'ms_yammer',
-                    active: false,
-                    id: project.providerYammerAppid,
-                    secret: project.providerYammerSecret,
-                    docs: 'https://developer.yammer.com/docs/oauth-2',
-                    component: Main
-                },
-                {
-                    name: 'Yandex',
-                    icon: 'yandex',
-                    active: false,
-                    id: project.providerYandexAppid,
-                    secret: project.providerYandexSecret,
-                    docs: 'https://tech.yandex.com/oauth/',
-                    component: Main
-                },
-                {
-                    name: 'Zoom',
-                    icon: 'zoom',
-                    active: false,
-                    id: project.providerZoomAppid,
-                    secret: project.providerZoomSecret,
-                    docs: 'https://marketplace.zoom.us/docs/guides/auth/oauth/',
-                    component: Main
-                }
-            ];
             set({ providers });
         }
     };
diff --git a/src/routes/console/project-[project]/authentication/settings.svelte b/src/routes/console/project-[project]/authentication/settings.svelte
index 801a6ce52..900aa2d02 100644
--- a/src/routes/console/project-[project]/authentication/settings.svelte
+++ b/src/routes/console/project-[project]/authentication/settings.svelte
@@ -11,12 +11,18 @@
     import { event } from '$lib/actions/analytics';
     import type { Provider } from '$lib/stores/oauth-providers';
     import { app } from '$lib/stores/app';
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
 
-    $: projectId = $project.$id;
-    $: authMethods.load($project);
-    $: OAuthProviders.load($project);
+    const projectId = $page.params.project;
     let showModal = false;
 
+    onMount(async () => {
+        await project.load(projectId);
+        authMethods.load($project);
+        OAuthProviders.load($project);
+    });
+
     const authUpdate = async (box: AuthMethod) => {
         try {
             await sdkForConsole.projects.updateAuthStatus(projectId, box.method, box.value);
@@ -27,6 +33,7 @@
                 }`
             });
         } catch (error) {
+            box.value = !box.value;
             addNotification({
                 type: 'error',
                 message: error.message
@@ -35,66 +42,66 @@
     };
 
     let selectedProvider: Provider | null = null;
-
-    //TODO: if operation not successful revert switchbox value
 </script>
 
-<Container>
-    <CardGrid>
-        <h2 class="heading-level-7">Authentication Methods</h2>
-        <p>Enable the authentication methods you wish to use.</p>
-        <svelte:fragment slot="aside">
-            <form class="form">
-                <ul class="form-list is-multiple">
-                    {#each $authMethods.list as box}
-                        <InputSwitch
-                            label={box.label}
-                            id={box.method}
-                            bind:value={box.value}
-                            on:change={() => {
-                                authUpdate(box);
-                            }} />
-                    {/each}
-                </ul>
-            </form>
-        </svelte:fragment>
-    </CardGrid>
-    <section class="common-section">
-        <h2 class="heading-level-6 common-section">OAuth2 Providers</h2>
-        <ul class="grid-box common-section">
-            {#each $OAuthProviders.providers as provider}
-                <button
-                    on:click={() => {
-                        selectedProvider = provider;
-                        showModal = true;
-                    }}
-                    use:event={{
-                        name: 'console_users',
-                        action: 'click_update',
-                        event: 'click',
-                        parameters: {
-                            provider: provider.name
-                        }
-                    }}
-                    class="card u-flex u-flex-vertical u-cross-center">
-                    <div class="image-item">
-                        <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.active}>
-                            {provider.active ? 'enabled' : 'disabled'}
-                        </Pill>
-                    </div>
-                </button>
-            {/each}
-        </ul>
-    </section>
-</Container>
+{#if $authMethods && $OAuthProviders}
+    <Container>
+        <CardGrid>
+            <h2 class="heading-level-7">Authentication Methods</h2>
+            <p>Enable the authentication methods you wish to use.</p>
+            <svelte:fragment slot="aside">
+                <form class="form">
+                    <ul class="form-list is-multiple">
+                        {#each $authMethods.list as box}
+                            <InputSwitch
+                                label={box.label}
+                                id={box.method}
+                                bind:value={box.value}
+                                on:change={() => {
+                                    authUpdate(box);
+                                }} />
+                        {/each}
+                    </ul>
+                </form>
+            </svelte:fragment>
+        </CardGrid>
+        <section class="common-section">
+            <h2 class="heading-level-6 common-section">OAuth2 Providers</h2>
+            <ul class="grid-box common-section">
+                {#each $OAuthProviders.providers as provider}
+                    <button
+                        on:click={() => {
+                            selectedProvider = provider;
+                            showModal = true;
+                        }}
+                        use:event={{
+                            name: 'console_users',
+                            action: 'click_update',
+                            event: 'click',
+                            parameters: {
+                                provider: provider.name
+                            }
+                        }}
+                        class="card u-flex u-flex-vertical u-cross-center">
+                        <div class="image-item">
+                            <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.active}>
+                                {provider.active ? 'enabled' : 'disabled'}
+                            </Pill>
+                        </div>
+                    </button>
+                {/each}
+            </ul>
+        </section>
+    </Container>
+{/if}
 
 {#if selectedProvider}
     <svelte:component