diff --git a/package-lock.json b/package-lock.json
index f32cd944e92..587c75d5022 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38043,10 +38043,10 @@
     },
     "packages/backend-core": {
       "name": "@clerk/backend-core",
-      "version": "2.9.0",
+      "version": "2.9.1",
       "license": "MIT",
       "dependencies": {
-        "@clerk/types": "^3.11.0",
+        "@clerk/types": "^3.12.0",
         "@peculiar/webcrypto": "^1.4.0",
         "@types/node": "^16.11.55",
         "@types/node-fetch": "^2",
@@ -38093,11 +38093,11 @@
     },
     "packages/clerk-js": {
       "name": "@clerk/clerk-js",
-      "version": "4.10.0",
+      "version": "4.11.0",
       "license": "MIT",
       "dependencies": {
-        "@clerk/shared": "^0.0.2",
-        "@clerk/types": "^3.11.0",
+        "@clerk/shared": "^0.0.5",
+        "@clerk/types": "^3.12.0",
         "@emotion/cache": "^11.7.1",
         "@emotion/react": "^11.9.0",
         "@floating-ui/react-dom-interactions": "^0.6.3",
@@ -38256,11 +38256,11 @@
     },
     "packages/edge": {
       "name": "@clerk/edge",
-      "version": "1.12.3",
+      "version": "1.12.4",
       "license": "MIT",
       "dependencies": {
-        "@clerk/backend-core": "^2.9.0",
-        "@clerk/types": "^3.11.0",
+        "@clerk/backend-core": "^2.9.1",
+        "@clerk/types": "^3.12.0",
         "@peculiar/webcrypto": "^1.4.0",
         "@types/node": "^16.11.55",
         "next": "^12.2.0"
@@ -38622,16 +38622,16 @@
     },
     "packages/expo": {
       "name": "@clerk/clerk-expo",
-      "version": "0.9.63",
+      "version": "0.9.65",
       "license": "MIT",
       "dependencies": {
-        "@clerk/clerk-js": "^4.10.0",
-        "@clerk/clerk-react": "^4.3.0",
+        "@clerk/clerk-js": "^4.11.0",
+        "@clerk/clerk-react": "^4.3.1",
         "base-64": "^1.0.0",
         "react-native-url-polyfill": "^1.3.0"
       },
       "devDependencies": {
-        "@clerk/types": "^3.11.0",
+        "@clerk/types": "^3.12.0",
         "@types/jest": "^27.4.0",
         "@types/node": "^16.11.55",
         "@types/react": "^17.0.39",
@@ -38753,13 +38753,13 @@
     },
     "packages/nextjs": {
       "name": "@clerk/nextjs",
-      "version": "4.5.3",
+      "version": "4.5.4",
       "license": "MIT",
       "dependencies": {
-        "@clerk/clerk-react": "^4.3.0",
-        "@clerk/clerk-sdk-node": "^4.4.3",
-        "@clerk/edge": "^1.12.3",
-        "@clerk/types": "^3.11.0",
+        "@clerk/clerk-react": "^4.3.1",
+        "@clerk/clerk-sdk-node": "^4.4.4",
+        "@clerk/edge": "^1.12.4",
+        "@clerk/types": "^3.12.0",
         "tslib": "^2.3.1"
       },
       "devDependencies": {
@@ -39085,10 +39085,10 @@
     },
     "packages/react": {
       "name": "@clerk/clerk-react",
-      "version": "4.3.0",
+      "version": "4.3.1",
       "license": "MIT",
       "dependencies": {
-        "@clerk/types": "^3.11.0",
+        "@clerk/types": "^3.12.0",
         "swr": "^1.3.0",
         "tslib": "^2.3.1"
       },
@@ -39126,12 +39126,12 @@
     },
     "packages/remix": {
       "name": "@clerk/remix",
-      "version": "1.3.7",
+      "version": "1.3.8",
       "license": "MIT",
       "dependencies": {
-        "@clerk/clerk-react": "^4.3.0",
-        "@clerk/clerk-sdk-node": "^4.4.3",
-        "@clerk/types": "^3.11.0",
+        "@clerk/clerk-react": "^4.3.1",
+        "@clerk/clerk-sdk-node": "^4.4.4",
+        "@clerk/types": "^3.12.0",
         "cookie": "^0.5.0",
         "tslib": "^2.3.1"
       },
@@ -39177,11 +39177,11 @@
     },
     "packages/sdk-node": {
       "name": "@clerk/clerk-sdk-node",
-      "version": "4.4.3",
+      "version": "4.4.4",
       "license": "MIT",
       "dependencies": {
-        "@clerk/backend-core": "^2.9.0",
-        "@clerk/types": "^3.11.0",
+        "@clerk/backend-core": "^2.9.1",
+        "@clerk/types": "^3.12.0",
         "@peculiar/webcrypto": "^1.4.0",
         "@types/cookies": "^0.7.7",
         "@types/express": "^4.17.11",
@@ -39223,10 +39223,10 @@
     },
     "packages/shared": {
       "name": "@clerk/shared",
-      "version": "0.0.2",
+      "version": "0.0.5",
       "license": "ISC",
       "devDependencies": {
-        "@clerk/types": "^3.11.0",
+        "@clerk/types": "^3.12.0",
         "@types/js-cookie": "^3.0.2",
         "js-cookie": "^3.0.1",
         "tsup": "^6.2.3",
@@ -39245,10 +39245,10 @@
     },
     "packages/themes": {
       "name": "@clerk/themes",
-      "version": "1.2.18",
+      "version": "1.2.19",
       "license": "MIT",
       "devDependencies": {
-        "@clerk/types": "^3.11.0",
+        "@clerk/types": "^3.12.0",
         "typescript": "*"
       },
       "engines": {
@@ -39260,7 +39260,7 @@
     },
     "packages/types": {
       "name": "@clerk/types",
-      "version": "3.11.0",
+      "version": "3.12.0",
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.1.0"
@@ -40732,7 +40732,7 @@
     "@clerk/backend-core": {
       "version": "file:packages/backend-core",
       "requires": {
-        "@clerk/types": "^3.11.0",
+        "@clerk/types": "^3.12.0",
         "@peculiar/webcrypto": "^1.4.0",
         "@types/jest": "^27.4.0",
         "@types/node": "^16.11.55",
@@ -40757,9 +40757,9 @@
     "@clerk/clerk-expo": {
       "version": "file:packages/expo",
       "requires": {
-        "@clerk/clerk-js": "^4.10.0",
-        "@clerk/clerk-react": "^4.3.0",
-        "@clerk/types": "^3.11.0",
+        "@clerk/clerk-js": "^4.11.0",
+        "@clerk/clerk-react": "^4.3.1",
+        "@clerk/types": "^3.12.0",
         "@types/jest": "^27.4.0",
         "@types/node": "^16.11.55",
         "@types/react": "^17.0.39",
@@ -40791,8 +40791,8 @@
         "@babel/preset-env": "^7.12.1",
         "@babel/preset-react": "^7.12.5",
         "@babel/preset-typescript": "^7.12.1",
-        "@clerk/shared": "^0.0.2",
-        "@clerk/types": "^3.11.0",
+        "@clerk/shared": "^0.0.5",
+        "@clerk/types": "^3.12.0",
         "@emotion/cache": "^11.7.1",
         "@emotion/react": "^11.9.0",
         "@floating-ui/react-dom-interactions": "^0.6.3",
@@ -40900,7 +40900,7 @@
     "@clerk/clerk-react": {
       "version": "file:packages/react",
       "requires": {
-        "@clerk/types": "^3.11.0",
+        "@clerk/types": "^3.12.0",
         "@testing-library/dom": "^7.28.1",
         "@testing-library/jest-dom": "^5.11.6",
         "@testing-library/react": "^11.2.1",
@@ -40933,8 +40933,8 @@
     "@clerk/clerk-sdk-node": {
       "version": "file:packages/sdk-node",
       "requires": {
-        "@clerk/backend-core": "^2.9.0",
-        "@clerk/types": "^3.11.0",
+        "@clerk/backend-core": "^2.9.1",
+        "@clerk/types": "^3.12.0",
         "@peculiar/webcrypto": "^1.4.0",
         "@types/cookies": "^0.7.7",
         "@types/express": "^4.17.11",
@@ -40971,8 +40971,8 @@
     "@clerk/edge": {
       "version": "file:packages/edge",
       "requires": {
-        "@clerk/backend-core": "^2.9.0",
-        "@clerk/types": "^3.11.0",
+        "@clerk/backend-core": "^2.9.1",
+        "@clerk/types": "^3.12.0",
         "@peculiar/webcrypto": "^1.4.0",
         "@types/jest": "^27.4.0",
         "@types/node": "^16.11.55",
@@ -41113,10 +41113,10 @@
     "@clerk/nextjs": {
       "version": "file:packages/nextjs",
       "requires": {
-        "@clerk/clerk-react": "^4.3.0",
-        "@clerk/clerk-sdk-node": "^4.4.3",
-        "@clerk/edge": "^1.12.3",
-        "@clerk/types": "^3.11.0",
+        "@clerk/clerk-react": "^4.3.1",
+        "@clerk/clerk-sdk-node": "^4.4.4",
+        "@clerk/edge": "^1.12.4",
+        "@clerk/types": "^3.12.0",
         "@types/jest": "^27.4.0",
         "@types/node": "^16.11.55",
         "@types/react": "^17.0.39",
@@ -41281,9 +41281,9 @@
     "@clerk/remix": {
       "version": "file:packages/remix",
       "requires": {
-        "@clerk/clerk-react": "^4.3.0",
-        "@clerk/clerk-sdk-node": "^4.4.3",
-        "@clerk/types": "^3.11.0",
+        "@clerk/clerk-react": "^4.3.1",
+        "@clerk/clerk-sdk-node": "^4.4.4",
+        "@clerk/types": "^3.12.0",
         "@types/cookie": "^0.5.0",
         "@types/jest": "^27.4.0",
         "@types/node": "^16.11.55",
@@ -41320,7 +41320,7 @@
     "@clerk/shared": {
       "version": "file:packages/shared",
       "requires": {
-        "@clerk/types": "^3.11.0",
+        "@clerk/types": "^3.12.0",
         "@types/js-cookie": "^3.0.2",
         "js-cookie": "^3.0.1",
         "tsup": "^6.2.3",
@@ -41331,7 +41331,7 @@
     "@clerk/themes": {
       "version": "file:packages/themes",
       "requires": {
-        "@clerk/types": "^3.11.0",
+        "@clerk/types": "^3.12.0",
         "typescript": "*"
       }
     },
diff --git a/packages/backend-core/CHANGELOG.md b/packages/backend-core/CHANGELOG.md
index f80558ca805..ced192a9cbe 100644
--- a/packages/backend-core/CHANGELOG.md
+++ b/packages/backend-core/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [2.9.1](https://github.com/clerkinc/javascript/compare/@clerk/backend-core@2.9.0...@clerk/backend-core@2.9.1) (2022-10-14)
+
+**Note:** Version bump only for package @clerk/backend-core
+
 ## [2.9.0](https://github.com/clerkinc/javascript/compare/@clerk/backend-core@2.9.0-staging.1...@clerk/backend-core@2.9.0) (2022-10-14)
 
 **Note:** Version bump only for package @clerk/backend-core
diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json
index 912be2c4765..b30842f18ea 100644
--- a/packages/backend-core/package.json
+++ b/packages/backend-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/backend-core",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "license": "MIT",
   "description": "Clerk Backend API core resources and authentication utilities for JavaScript environments.",
   "scripts": {
@@ -14,7 +14,7 @@
   "main": "dist/cjs/index.js",
   "module": "dist/mjs/index.js",
   "dependencies": {
-    "@clerk/types": "^3.11.0",
+    "@clerk/types": "^3.12.0",
     "@peculiar/webcrypto": "^1.4.0",
     "@types/node": "^16.11.55",
     "@types/node-fetch": "^2",
diff --git a/packages/clerk-js/CHANGELOG.md b/packages/clerk-js/CHANGELOG.md
index c6f34f872df..cef53de11c3 100644
--- a/packages/clerk-js/CHANGELOG.md
+++ b/packages/clerk-js/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.11.0](https://github.com/clerkinc/javascript/compare/@clerk/clerk-js@4.10.1...@clerk/clerk-js@4.11.0) (2022-10-14)
+
+### Features
+
+- **types,clerk-js:** List only authenticatable OAuth providers in Sign in/up components ([4b3f1e6](https://github.com/clerkinc/javascript/commit/4b3f1e67d655dfb3e818ce9015b68b369d7a1bd4))
+
+### Bug Fixes
+
+- **clerk-js:** Replace `avatar` descriptor with `avatarBox` ([65cab1f](https://github.com/clerkinc/javascript/commit/65cab1f4581ea40244c139a59e27f2dac7407d97))
+
+### [4.10.1](https://github.com/clerkinc/javascript/compare/@clerk/clerk-js@4.10.0...@clerk/clerk-js@4.10.1) (2022-10-14)
+
+### Bug Fixes
+
+- **shared:** Version bump for shared ([c0cebb5](https://github.com/clerkinc/javascript/commit/c0cebb50bc94fa44e37b96c5a645a8b18ba37df8))
+
 ## [4.10.0](https://github.com/clerkinc/javascript/compare/@clerk/clerk-js@4.10.0-staging.2...@clerk/clerk-js@4.10.0) (2022-10-14)
 
 **Note:** Version bump only for package @clerk/clerk-js
diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json
index dbff47d9d89..3665dc00f51 100644
--- a/packages/clerk-js/package.json
+++ b/packages/clerk-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/clerk-js",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "license": "MIT",
   "description": "Clerk.dev JS library",
   "keywords": [
@@ -38,8 +38,8 @@
     "test:coverage": "jest --collectCoverage"
   },
   "dependencies": {
-    "@clerk/shared": "^0.0.2",
-    "@clerk/types": "^3.11.0",
+    "@clerk/shared": "^0.0.5",
+    "@clerk/types": "^3.12.0",
     "@emotion/cache": "^11.7.1",
     "@emotion/react": "^11.9.0",
     "@floating-ui/react-dom-interactions": "^0.6.3",
diff --git a/packages/clerk-js/src/core/resources/UserSettings.test.ts b/packages/clerk-js/src/core/resources/UserSettings.test.ts
index 17ef629cf0e..cd6f24a5f22 100644
--- a/packages/clerk-js/src/core/resources/UserSettings.test.ts
+++ b/packages/clerk-js/src/core/resources/UserSettings.test.ts
@@ -199,7 +199,7 @@ describe('UserSettings', () => {
         oauth_google: {
           enabled: true,
           required: false,
-          authenticatable: true,
+          authenticatable: false,
           strategy: 'oauth_google',
         },
         oauth_gitlab: {
@@ -227,8 +227,8 @@ describe('UserSettings', () => {
       },
     } as any as UserSettingsJSON);
 
-    const res = sut.socialProviderStrategies;
-    expect(res).toEqual(['oauth_facebook', 'oauth_google']);
+    expect(sut.socialProviderStrategies).toEqual(['oauth_facebook', 'oauth_google']);
+    expect(sut.authenticatableSocialStrategies).toEqual(['oauth_facebook']);
   });
 
   it('returns enabled standard form attributes', function () {
diff --git a/packages/clerk-js/src/core/resources/UserSettings.ts b/packages/clerk-js/src/core/resources/UserSettings.ts
index 6357f23e3f7..498b0f94c3f 100644
--- a/packages/clerk-js/src/core/resources/UserSettings.ts
+++ b/packages/clerk-js/src/core/resources/UserSettings.ts
@@ -22,6 +22,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
   signUp!: SignUpData;
 
   socialProviderStrategies: OAuthStrategy[] = [];
+  authenticatableSocialStrategies: OAuthStrategy[] = [];
   web3FirstFactors: Web3Strategy[] = [];
   enabledFirstFactorIdentifiers: Array<keyof UserSettingsResource['attributes']> = [];
 
@@ -48,6 +49,7 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
     this.signIn = data.sign_in;
     this.signUp = data.sign_up;
     this.socialProviderStrategies = this.getSocialProviderStrategies(data.social);
+    this.authenticatableSocialStrategies = this.getAuthenticatableSocialStrategies(data.social);
     this.web3FirstFactors = this.getWeb3FirstFactors(data.attributes);
     this.enabledFirstFactorIdentifiers = this.getEnabledFirstFactorIdentifiers(data.attributes);
     return this;
@@ -84,4 +86,15 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
       .map(([, desc]) => desc.strategy)
       .sort();
   }
+
+  private getAuthenticatableSocialStrategies(social: OAuthProviders): OAuthStrategy[] {
+    if (!social) {
+      return [];
+    }
+
+    return Object.entries(social)
+      .filter(([, desc]) => desc.enabled && desc.authenticatable)
+      .map(([, desc]) => desc.strategy)
+      .sort();
+  }
 }
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
index 5f24e5bc49c..8b70612e5c3 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -18,8 +18,7 @@ import {
   withCardStateProvider,
 } from '../../elements';
 import { useCardState } from '../../elements/contexts';
-import { useNavigate } from '../../hooks';
-import { useLoadingStatus } from '../../hooks';
+import { useLoadingStatus, useNavigate } from '../../hooks';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
 import { buildRequest, FormControlState, handleError, isMobileDevice, useFormControl } from '../../utils';
 import { SignInSocialButtons } from './SignInSocialButtons';
@@ -38,7 +37,7 @@ export function _SignInStart(): JSX.Element {
 
   const standardFormAttributes = userSettings.enabledFirstFactorIdentifiers;
   const web3FirstFactors = userSettings.web3FirstFactors;
-  const socialProviderStrategies = userSettings.socialProviderStrategies;
+  const authenticatableSocialStrategies = userSettings.authenticatableSocialStrategies;
   const passwordBasedInstance = userSettings.instanceIsPasswordBased;
   const identifierInputDisplayValues = getIdentifierControlDisplayValues(standardFormAttributes);
 
@@ -178,7 +177,7 @@ export function _SignInStart(): JSX.Element {
     return <LoadingCard />;
   }
 
-  const hasSocialOrWeb3Buttons = !!socialProviderStrategies.length || !!web3FirstFactors.length;
+  const hasSocialOrWeb3Buttons = !!authenticatableSocialStrategies.length || !!web3FirstFactors.length;
   const shouldAutofocus = !isMobileDevice() && hasSocialOrWeb3Buttons;
 
   return (
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
index aae3c5eb17e..5db2ade4c89 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
@@ -93,7 +93,7 @@ function _SignUpContinue() {
   });
   minimizeFieldsForExistingSignup(fields, signUp);
 
-  const oauthOptions = userSettings.socialProviderStrategies;
+  const oauthOptions = userSettings.authenticatableSocialStrategies;
   const web3Options = userSettings.web3FirstFactors;
 
   const handleChangeActive = (type: ActiveIdentifier) => {
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
index 4e08742d961..7b763a5e70a 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
@@ -15,8 +15,7 @@ import {
   withCardStateProvider,
 } from '../../elements';
 import { useCardState } from '../../elements/contexts';
-import { useNavigate } from '../../hooks';
-import { useLoadingStatus } from '../../hooks';
+import { useLoadingStatus, useNavigate } from '../../hooks';
 import { buildRequest, FormControlState, handleError, useFormControl } from '../../utils';
 import { SignUpForm } from './SignUpForm';
 import {
@@ -222,7 +221,7 @@ function _SignUpStart(): JSX.Element {
   const shouldShowForm = showFormFields(userSettings) && visibleFields.length > 0;
 
   const showOauthProviders =
-    (!hasTicket || missingRequirementsWithTicket) && userSettings.socialProviderStrategies.length > 0;
+    (!hasTicket || missingRequirementsWithTicket) && userSettings.authenticatableSocialStrategies.length > 0;
   const showWeb3Providers = !hasTicket && userSettings.web3FirstFactors.length > 0;
 
   return (
diff --git a/packages/clerk-js/src/ui/components/SignUp/signUpFormHelpers.ts b/packages/clerk-js/src/ui/components/SignUp/signUpFormHelpers.ts
index 56357d842e7..ba6c9a9c548 100644
--- a/packages/clerk-js/src/ui/components/SignUp/signUpFormHelpers.ts
+++ b/packages/clerk-js/src/ui/components/SignUp/signUpFormHelpers.ts
@@ -109,9 +109,9 @@ export const getInitialActiveIdentifier = (attributes: Attributes, isProgressive
 };
 
 export function showFormFields(userSettings: UserSettingsResource): boolean {
-  const { socialProviderStrategies, web3FirstFactors } = userSettings;
+  const { authenticatableSocialStrategies, web3FirstFactors } = userSettings;
 
-  return userSettings.hasValidAuthFactor || (!socialProviderStrategies.length && !web3FirstFactors.length);
+  return userSettings.hasValidAuthFactor || (!authenticatableSocialStrategies.length && !web3FirstFactors.length);
 }
 
 export function emailOrPhone(attributes: Attributes, isProgressiveSignUp: boolean) {
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index 5eec620fad9..f2a4aad15ed 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -89,7 +89,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'formFieldInputCopyToClipboardButton',
   'formFieldInputCopyToClipboardIcon',
 
-  'avatar',
+  'avatarBox',
   'avatarImage',
 
   'userButtonBox',
diff --git a/packages/clerk-js/src/ui/elements/SocialButtons.tsx b/packages/clerk-js/src/ui/elements/SocialButtons.tsx
index 16032afe529..7633d1142e1 100644
--- a/packages/clerk-js/src/ui/elements/SocialButtons.tsx
+++ b/packages/clerk-js/src/ui/elements/SocialButtons.tsx
@@ -26,11 +26,14 @@ const isWeb3Strategy = (val: string): val is Web3Strategy => {
 
 export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
   const { oauthCallback, web3Callback, enableOAuthProviders = true, enableWeb3Providers = true } = props;
-  const { web3Strategies, oauthStrategies, strategyToDisplayData } = useEnabledThirdPartyProviders();
+  const { web3Strategies, authenticatableOauthStrategies, strategyToDisplayData } = useEnabledThirdPartyProviders();
   const card = useCardState();
   const { socialButtonsVariant } = useAppearance().parsedLayout;
 
-  const strategies = [...(enableOAuthProviders ? oauthStrategies : []), ...(enableWeb3Providers ? web3Strategies : [])];
+  const strategies = [
+    ...(enableOAuthProviders ? authenticatableOauthStrategies : []),
+    ...(enableWeb3Providers ? web3Strategies : []),
+  ];
 
   if (!strategies.length) {
     return null;
diff --git a/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx b/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx
index 65859b02cd4..6be61f8e762 100644
--- a/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx
+++ b/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx
@@ -27,11 +27,11 @@ const strategyToDisplayData: ThirdPartyStrategyToDataMap = fromEntries(
 ) as ThirdPartyStrategyToDataMap;
 
 export const useEnabledThirdPartyProviders = () => {
-  const { socialProviderStrategies, web3FirstFactors } = useEnvironment().userSettings;
+  const { socialProviderStrategies, web3FirstFactors, authenticatableSocialStrategies } = useEnvironment().userSettings;
   return {
     strategies: [...socialProviderStrategies, ...web3FirstFactors],
     web3Strategies: [...web3FirstFactors],
-    oauthStrategies: [...socialProviderStrategies],
+    authenticatableOauthStrategies: [...authenticatableSocialStrategies],
     strategyToDisplayData,
     providerToDisplayData,
   };
diff --git a/packages/edge/CHANGELOG.md b/packages/edge/CHANGELOG.md
index e2568156baa..a5767002ddd 100644
--- a/packages/edge/CHANGELOG.md
+++ b/packages/edge/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.12.4](https://github.com/clerkinc/javascript/compare/@clerk/edge@1.12.3...@clerk/edge@1.12.4) (2022-10-14)
+
+**Note:** Version bump only for package @clerk/edge
+
 ### [1.12.3](https://github.com/clerkinc/javascript/compare/@clerk/edge@1.12.3-staging.2...@clerk/edge@1.12.3) (2022-10-14)
 
 **Note:** Version bump only for package @clerk/edge
diff --git a/packages/edge/package.json b/packages/edge/package.json
index 3487c2b166a..7e80acb45b9 100644
--- a/packages/edge/package.json
+++ b/packages/edge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/edge",
-  "version": "1.12.3",
+  "version": "1.12.4",
   "license": "MIT",
   "description": "Clerk SDK for serverless and edge environments",
   "keywords": [
@@ -38,8 +38,8 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@clerk/backend-core": "^2.9.0",
-    "@clerk/types": "^3.11.0",
+    "@clerk/backend-core": "^2.9.1",
+    "@clerk/types": "^3.12.0",
     "@peculiar/webcrypto": "^1.4.0",
     "@types/node": "^16.11.55",
     "next": "^12.2.0"
diff --git a/packages/edge/src/info.ts b/packages/edge/src/info.ts
index 59f6e329650..dfa1807b9a5 100644
--- a/packages/edge/src/info.ts
+++ b/packages/edge/src/info.ts
@@ -1,3 +1,3 @@
 /** DO NOT EDIT: This file is automatically generated by ../scripts/info.js */
-export const LIB_VERSION = '1.12.3';
+export const LIB_VERSION = '1.12.4';
 export const LIB_NAME = '@clerk/edge';
diff --git a/packages/expo/CHANGELOG.md b/packages/expo/CHANGELOG.md
index 34a49b854d4..71fe4caecad 100644
--- a/packages/expo/CHANGELOG.md
+++ b/packages/expo/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.9.65](https://github.com/clerkinc/javascript/compare/@clerk/clerk-expo@0.9.64...@clerk/clerk-expo@0.9.65) (2022-10-14)
+
+**Note:** Version bump only for package @clerk/clerk-expo
+
+### [0.9.64](https://github.com/clerkinc/javascript/compare/@clerk/clerk-expo@0.9.63...@clerk/clerk-expo@0.9.64) (2022-10-14)
+
+**Note:** Version bump only for package @clerk/clerk-expo
+
 ### [0.9.63](https://github.com/clerkinc/javascript/compare/@clerk/clerk-expo@0.9.63-staging.2...@clerk/clerk-expo@0.9.63) (2022-10-14)
 
 **Note:** Version bump only for package @clerk/clerk-expo
diff --git a/packages/expo/package.json b/packages/expo/package.json
index e8942369567..2a60a525ee6 100644
--- a/packages/expo/package.json
+++ b/packages/expo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/clerk-expo",
-  "version": "0.9.63",
+  "version": "0.9.65",
   "license": "MIT",
   "description": "Clerk.dev React Native/Expo library",
   "keywords": [
@@ -27,13 +27,13 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@clerk/clerk-js": "^4.10.0",
-    "@clerk/clerk-react": "^4.3.0",
+    "@clerk/clerk-js": "^4.11.0",
+    "@clerk/clerk-react": "^4.3.1",
     "base-64": "^1.0.0",
     "react-native-url-polyfill": "^1.3.0"
   },
   "devDependencies": {
-    "@clerk/types": "^3.11.0",
+    "@clerk/types": "^3.12.0",
     "@types/jest": "^27.4.0",
     "@types/node": "^16.11.55",
     "@types/react": "^17.0.39",
diff --git a/packages/nextjs/CHANGELOG.md b/packages/nextjs/CHANGELOG.md
index d46c21e62f5..4e58c27ece2 100644
--- a/packages/nextjs/CHANGELOG.md
+++ b/packages/nextjs/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [4.5.4](https://github.com/clerkinc/javascript/compare/@clerk/nextjs@4.5.3...@clerk/nextjs@4.5.4) (2022-10-14)
+
+**Note:** Version bump only for package @clerk/nextjs
+
 ### [4.5.3](https://github.com/clerkinc/javascript/compare/@clerk/nextjs@4.5.3-staging.2...@clerk/nextjs@4.5.3) (2022-10-14)
 
 **Note:** Version bump only for package @clerk/nextjs
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index b3292508b1c..d1e76c85ccb 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/nextjs",
-  "version": "4.5.3",
+  "version": "4.5.4",
   "license": "MIT",
   "description": "Clerk.dev SDK for NextJS",
   "keywords": [
@@ -35,10 +35,10 @@
     "dev": "tsc -p tsconfig.build.json --watch"
   },
   "dependencies": {
-    "@clerk/clerk-react": "^4.3.0",
-    "@clerk/clerk-sdk-node": "^4.4.3",
-    "@clerk/edge": "^1.12.3",
-    "@clerk/types": "^3.11.0",
+    "@clerk/clerk-react": "^4.3.1",
+    "@clerk/clerk-sdk-node": "^4.4.4",
+    "@clerk/edge": "^1.12.4",
+    "@clerk/types": "^3.12.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index edf97d5a686..6e057c99ed0 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [4.3.1](https://github.com/clerkinc/javascript/compare/@clerk/clerk-react@4.3.0...@clerk/clerk-react@4.3.1) (2022-10-14)
+
+**Note:** Version bump only for package @clerk/clerk-react
+
 ## [4.3.0](https://github.com/clerkinc/javascript/compare/@clerk/clerk-react@4.3.0-staging.2...@clerk/clerk-react@4.3.0) (2022-10-14)
 
 **Note:** Version bump only for package @clerk/clerk-react
diff --git a/packages/react/package.json b/packages/react/package.json
index 33014beadbf..f98cccfe166 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/clerk-react",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "license": "MIT",
   "description": "Clerk.dev React library",
   "keywords": [
@@ -29,7 +29,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@clerk/types": "^3.11.0",
+    "@clerk/types": "^3.12.0",
     "swr": "^1.3.0",
     "tslib": "^2.3.1"
   },
diff --git a/packages/react/src/info.ts b/packages/react/src/info.ts
index b68d91022ac..6a6cbf1f7da 100644
--- a/packages/react/src/info.ts
+++ b/packages/react/src/info.ts
@@ -1,3 +1,3 @@
 /** DO NOT EDIT: This file is automatically generated by ../scripts/info.js */
-export const LIB_VERSION = '4.3.0';
+export const LIB_VERSION = '4.3.1';
 export const LIB_NAME = '@clerk/clerk-react';
diff --git a/packages/remix/CHANGELOG.md b/packages/remix/CHANGELOG.md
index 5da98960f3f..53aa5111d6a 100644
--- a/packages/remix/CHANGELOG.md
+++ b/packages/remix/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.3.8](https://github.com/clerkinc/javascript/compare/@clerk/remix@1.3.7...@clerk/remix@1.3.8) (2022-10-14)
+
+**Note:** Version bump only for package @clerk/remix
+
 ### [1.3.7](https://github.com/clerkinc/javascript/compare/@clerk/remix@1.3.7-staging.2...@clerk/remix@1.3.7) (2022-10-14)
 
 **Note:** Version bump only for package @clerk/remix
diff --git a/packages/remix/package.json b/packages/remix/package.json
index 2f994c6b35d..ec090e1223b 100644
--- a/packages/remix/package.json
+++ b/packages/remix/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/remix",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "license": "MIT",
   "description": "Clerk.dev SDK for Remix",
   "keywords": [
@@ -33,9 +33,9 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@clerk/clerk-react": "^4.3.0",
-    "@clerk/clerk-sdk-node": "^4.4.3",
-    "@clerk/types": "^3.11.0",
+    "@clerk/clerk-react": "^4.3.1",
+    "@clerk/clerk-sdk-node": "^4.4.4",
+    "@clerk/types": "^3.12.0",
     "cookie": "^0.5.0",
     "tslib": "^2.3.1"
   },
diff --git a/packages/sdk-node/CHANGELOG.md b/packages/sdk-node/CHANGELOG.md
index faf060fa942..3358caf08a0 100644
--- a/packages/sdk-node/CHANGELOG.md
+++ b/packages/sdk-node/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [4.4.4](https://github.com/clerkinc/javascript/compare/@clerk/clerk-sdk-node@4.4.3...@clerk/clerk-sdk-node@4.4.4) (2022-10-14)
+
+**Note:** Version bump only for package @clerk/clerk-sdk-node
+
 ### [4.4.3](https://github.com/clerkinc/javascript/compare/@clerk/clerk-sdk-node@4.4.3-staging.2...@clerk/clerk-sdk-node@4.4.3) (2022-10-14)
 
 **Note:** Version bump only for package @clerk/clerk-sdk-node
diff --git a/packages/sdk-node/package.json b/packages/sdk-node/package.json
index 070df72e55f..db01ce87ab5 100644
--- a/packages/sdk-node/package.json
+++ b/packages/sdk-node/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "4.4.3",
+  "version": "4.4.4",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -38,8 +38,8 @@
     "typescript": "*"
   },
   "dependencies": {
-    "@clerk/backend-core": "^2.9.0",
-    "@clerk/types": "^3.11.0",
+    "@clerk/backend-core": "^2.9.1",
+    "@clerk/types": "^3.12.0",
     "@peculiar/webcrypto": "^1.4.0",
     "@types/cookies": "^0.7.7",
     "@types/express": "^4.17.11",
diff --git a/packages/sdk-node/src/info.ts b/packages/sdk-node/src/info.ts
index be788b0ff1c..0f44ad806de 100644
--- a/packages/sdk-node/src/info.ts
+++ b/packages/sdk-node/src/info.ts
@@ -1,3 +1,3 @@
 /** DO NOT EDIT: This file is automatically generated by ../scripts/info.js */
-export const LIB_VERSION = '4.4.3';
+export const LIB_VERSION = '4.4.4';
 export const LIB_NAME = '@clerk/clerk-sdk-node';
diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md
index c8b6954f745..511b493881e 100644
--- a/packages/shared/CHANGELOG.md
+++ b/packages/shared/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.0.5](https://github.com/clerkinc/clerk_docker/compare/@clerk/shared@0.0.4...@clerk/shared@0.0.5) (2022-10-14)
+
+**Note:** Version bump only for package @clerk/shared
+
+### [0.0.4](https://github.com/clerkinc/clerk_docker/compare/@clerk/shared@0.0.2-staging.2...@clerk/shared@0.0.4) (2022-10-14)
+
+### Bug Fixes
+
+- **shared:** Version bump for shared ([c0cebb5](https://github.com/clerkinc/clerk_docker/commit/c0cebb50bc94fa44e37b96c5a645a8b18ba37df8))
+
 ### [0.0.2](https://github.com/clerkinc/clerk_docker/compare/@clerk/shared@0.0.2-staging.2...@clerk/shared@0.0.2) (2022-10-14)
 
 **Note:** Version bump only for package @clerk/shared
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 3ecc8bf095e..e35bb694b63 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/shared",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "Internal package utils used by the Clerk SDKs",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/index.js",
@@ -18,7 +18,7 @@
     "test:watch": "vitest"
   },
   "devDependencies": {
-    "@clerk/types": "^3.11.0",
+    "@clerk/types": "^3.12.0",
     "@types/js-cookie": "^3.0.2",
     "js-cookie": "^3.0.1",
     "tsup": "^6.2.3",
diff --git a/packages/themes/CHANGELOG.md b/packages/themes/CHANGELOG.md
index d22ace82f6f..6b1be0be5ee 100644
--- a/packages/themes/CHANGELOG.md
+++ b/packages/themes/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.2.19](https://github.com/clerkinc/javascript/compare/@clerk/themes@1.2.18...@clerk/themes@1.2.19) (2022-10-14)
+
+**Note:** Version bump only for package @clerk/themes
+
 ### [1.2.18](https://github.com/clerkinc/javascript/compare/@clerk/themes@1.2.18-staging.2...@clerk/themes@1.2.18) (2022-10-14)
 
 **Note:** Version bump only for package @clerk/themes
diff --git a/packages/themes/package.json b/packages/themes/package.json
index f5a5b3eb2b7..634f5b276e4 100644
--- a/packages/themes/package.json
+++ b/packages/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/themes",
-  "version": "1.2.18",
+  "version": "1.2.19",
   "license": "MIT",
   "description": "Themes for the Clerk auth components",
   "keywords": [
@@ -28,7 +28,7 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "@clerk/types": "^3.11.0",
+    "@clerk/types": "^3.12.0",
     "typescript": "*"
   },
   "peerDependencies": {
diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md
index 438c3d34cf5..8dcf5d50bfc 100644
--- a/packages/types/CHANGELOG.md
+++ b/packages/types/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.12.0](https://github.com/clerkinc/javascript/compare/@clerk/types@3.11.0...@clerk/types@3.12.0) (2022-10-14)
+
+### Features
+
+- **types,clerk-js:** List only authenticatable OAuth providers in Sign in/up components ([4b3f1e6](https://github.com/clerkinc/javascript/commit/4b3f1e67d655dfb3e818ce9015b68b369d7a1bd4))
+
 ## [3.11.0](https://github.com/clerkinc/javascript/compare/@clerk/types@3.11.0-staging.2...@clerk/types@3.11.0) (2022-10-14)
 
 **Note:** Version bump only for package @clerk/types
diff --git a/packages/types/package.json b/packages/types/package.json
index b1150548d44..2adb1bfb87c 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/types",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "license": "MIT",
   "description": "Typings for Clerk libraries.",
   "keywords": [
diff --git a/packages/types/src/userSettings.ts b/packages/types/src/userSettings.ts
index 074f46d2240..e673a72f17e 100644
--- a/packages/types/src/userSettings.ts
+++ b/packages/types/src/userSettings.ts
@@ -70,6 +70,7 @@ export interface UserSettingsResource extends ClerkResource {
   signIn: SignInData;
   signUp: SignUpData;
   socialProviderStrategies: OAuthStrategy[];
+  authenticatableSocialStrategies: OAuthStrategy[];
   web3FirstFactors: Web3Strategy[];
   enabledFirstFactorIdentifiers: Attribute[];
   instanceIsPasswordBased: boolean;
diff --git a/playground/nextjs/middleware.ts b/playground/nextjs/middleware.ts
new file mode 100644
index 00000000000..a32ec9b83a5
--- /dev/null
+++ b/playground/nextjs/middleware.ts
@@ -0,0 +1,27 @@
+import { getAuth, withClerkMiddleware } from '@clerk/nextjs/server';
+import { NextResponse } from 'next/server';
+
+// Set the paths that don't require the user to be signed in
+const publicPaths = ['/', '/sign-in*', '/sign-up*'];
+
+const isPublic = (path: string) => {
+  return publicPaths.find(x => path.match(new RegExp(`^${x}$`.replace('*$', '($|/)'))));
+};
+
+export default withClerkMiddleware(req => {
+  if (isPublic(req.nextUrl.pathname)) {
+    return NextResponse.next();
+  }
+
+  const { userId } = getAuth(req);
+
+  if (!userId) {
+    console.log(req.url);
+    const signInUrl = new URL('/sign-in', req.url);
+    signInUrl.searchParams.set('redirect_url', req.url);
+    return NextResponse.redirect(signInUrl);
+  }
+  return NextResponse.next();
+});
+
+export const config = { matcher: '/((?!.*\\.).*)' };
diff --git a/playground/nextjs/package.json b/playground/nextjs/package.json
index 4f5e06508c1..6dcd25a0468 100644
--- a/playground/nextjs/package.json
+++ b/playground/nextjs/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "rm -rf .next && next dev",
+    "dev": "rm -rf .next && next dev --port 4011",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
diff --git a/playground/nextjs/pages/_app.tsx b/playground/nextjs/pages/_app.tsx
index 21e4fb80b59..3855f0648e8 100644
--- a/playground/nextjs/pages/_app.tsx
+++ b/playground/nextjs/pages/_app.tsx
@@ -1,7 +1,8 @@
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 
-import { ClerkProvider, SignedOut, SignIn } from '@clerk/nextjs';
+import { ClerkProvider, SignedOut, SignInButton, UserButton } from '@clerk/nextjs';
+import Link from 'next/link';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -10,12 +11,34 @@ function MyApp({ Component, pageProps }: AppProps) {
       clerkJSUrl={'https://js.lclclerk.com/npm/clerk.browser.js'}
       {...pageProps}
     >
-      <SignedOut>
-        <SignIn />
-      </SignedOut>
+      <AppBar />
       <Component {...pageProps} />
     </ClerkProvider>
   );
 }
 
+const AppBar = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '1rem',
+        borderBottom: '1px solid black',
+      }}
+    >
+      <Link href={'/'}>
+        <a>
+          <h2>Nextjs Playground</h2>
+        </a>
+      </Link>
+      <UserButton />
+      <SignedOut>
+        <SignInButton mode={'modal'} />
+      </SignedOut>
+    </div>
+  );
+};
+
 export default MyApp;
diff --git a/playground/nextjs/pages/index.tsx b/playground/nextjs/pages/index.tsx
index 9613544210c..dcca83a36d4 100644
--- a/playground/nextjs/pages/index.tsx
+++ b/playground/nextjs/pages/index.tsx
@@ -1,6 +1,6 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
-import Image from 'next/image';
+import Link from 'next/link';
 import styles from '../styles/Home.module.css';
 
 const Home: NextPage = () => {
@@ -19,66 +19,26 @@ const Home: NextPage = () => {
       </Head>
 
       <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href='https://nextjs.org'>Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing <code className={styles.code}>pages/index.tsx</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a
-            href='https://nextjs.org/docs'
-            className={styles.card}
-          >
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a
-            href='https://nextjs.org/learn'
-            className={styles.card}
-          >
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href='https://github.com/vercel/next.js/tree/canary/examples'
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href='https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
-          </a>
-        </div>
+        <h1 className={styles.title}>Clerk x Nextjs</h1>
+        <p className={styles.description}>Get started by editing visiting one of the pages below</p>
+        <ul>
+          <li>
+            <Link href={'/sign-in'}>
+              <a>Sign in page</a>
+            </Link>
+          </li>
+          <li>
+            <Link href={'/sign-up'}>
+              <a>Sign up page</a>
+            </Link>
+          </li>
+          <li>
+            <Link href={'/user'}>
+              <a>User profile page</a>
+            </Link>
+          </li>
+        </ul>
       </main>
-
-      <footer className={styles.footer}>
-        <a
-          href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
-          target='_blank'
-          rel='noopener noreferrer'
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image
-              src='/vercel.svg'
-              alt='Vercel Logo'
-              width={72}
-              height={16}
-            />
-          </span>
-        </a>
-      </footer>
     </div>
   );
 };
diff --git a/playground/nextjs/pages/sign-in/[[...index]].tsx b/playground/nextjs/pages/sign-in/[[...index]].tsx
new file mode 100644
index 00000000000..985999a57c5
--- /dev/null
+++ b/playground/nextjs/pages/sign-in/[[...index]].tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { SignIn } from '@clerk/nextjs';
+import type { NextPage } from 'next';
+
+const SignInPage: NextPage = () => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <SignIn />
+    </div>
+  );
+};
+
+export default SignInPage;
diff --git a/playground/nextjs/pages/sign-up/[[...index]].tsx b/playground/nextjs/pages/sign-up/[[...index]].tsx
new file mode 100644
index 00000000000..da4fbd74a7b
--- /dev/null
+++ b/playground/nextjs/pages/sign-up/[[...index]].tsx
@@ -0,0 +1,13 @@
+import { SignUp } from '@clerk/nextjs';
+import type { NextPage } from 'next';
+import React from 'react';
+
+const SignUpPage: NextPage = () => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <SignUp />
+    </div>
+  );
+};
+
+export default SignUpPage;
diff --git a/playground/nextjs/pages/user/[[...index]].tsx b/playground/nextjs/pages/user/[[...index]].tsx
new file mode 100644
index 00000000000..9dea333d4af
--- /dev/null
+++ b/playground/nextjs/pages/user/[[...index]].tsx
@@ -0,0 +1,13 @@
+import { UserProfile } from '@clerk/nextjs';
+import type { NextPage } from 'next';
+import React from 'react';
+
+const UserProfilePage: NextPage = () => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <UserProfile />
+    </div>
+  );
+};
+
+export default UserProfilePage;