From dac170ec6e534643c61c3b034d2e175f6f243db4 Mon Sep 17 00:00:00 2001
From: Ankit Tiwari <ankucodes@gmail.com>
Date: Tue, 27 Aug 2024 21:20:04 +0530
Subject: [PATCH] feat: Add functions and prebuiltUI for oauth2 logout (#850)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Add functions and prebuiltUI for oauth2 logout

* Update lib/ts/recipe/oauth2provider/components/themes/themeBase.tsx

Co-authored-by: Mihály Lengyel <mihaly@lengyel.tech>

* fix: PR changes

* fix: PR changes

---------

Co-authored-by: Mihály Lengyel <mihaly@lengyel.tech>
---
 examples/for-tests/src/OAuth2Page.js          |   5 +-
 lib/build/components/assets/logoutIcon.d.ts   |   2 +
 lib/build/oauth2provider-shared.js            |  25 ++
 lib/build/oauth2provider.js                   |  18 +
 lib/build/oauth2providerprebuiltui.js         | 379 ++++++++++++++++--
 .../features/oauth2LogoutScreen/index.d.ts    |  11 +
 .../OAuth2LogoutScreenInner.d.ts              |   5 +
 .../themes/oauth2LogoutScreen/index.d.ts      |   3 +
 .../components/themes/themeBase.d.ts          |   7 +
 .../components/themes/translations.d.ts       |  26 +-
 .../recipe/oauth2provider/constants.d.ts      |   1 +
 lib/build/recipe/oauth2provider/index.d.ts    |  20 +
 .../recipe/oauth2provider/prebuiltui.d.ts     |  35 +-
 lib/build/recipe/oauth2provider/types.d.ts    |  47 ++-
 lib/ts/components/assets/logoutIcon.tsx       |  27 ++
 .../features/oauth2LogoutScreen/index.tsx     | 130 ++++++
 .../OAuth2LogoutScreenInner.tsx               |  41 ++
 .../themes/oauth2LogoutScreen/index.tsx       |  36 ++
 .../components/themes/styles.css              |  31 ++
 .../components/themes/themeBase.tsx           |  36 ++
 .../components/themes/translations.ts         |   9 +-
 lib/ts/recipe/oauth2provider/constants.ts     |   1 +
 .../oauth2provider/functionOverrides.ts       |   9 +
 lib/ts/recipe/oauth2provider/index.ts         |  23 ++
 lib/ts/recipe/oauth2provider/prebuiltui.tsx   |  57 ++-
 lib/ts/recipe/oauth2provider/recipe.ts        |   2 +
 lib/ts/recipe/oauth2provider/types.ts         |  57 ++-
 lib/ts/recipe/oauth2provider/utils.ts         |   5 +
 stories/oauth2provider.stories.tsx            |  81 ++++
 test/end-to-end/oauth2provider.test.js        |  63 +++
 test/helpers.js                               |   8 +-
 test/unit/componentOverrides.test.tsx         |   7 +-
 32 files changed, 1129 insertions(+), 78 deletions(-)
 create mode 100644 lib/build/components/assets/logoutIcon.d.ts
 create mode 100644 lib/build/recipe/oauth2provider/components/features/oauth2LogoutScreen/index.d.ts
 create mode 100644 lib/build/recipe/oauth2provider/components/themes/oauth2LogoutScreen/OAuth2LogoutScreenInner.d.ts
 create mode 100644 lib/build/recipe/oauth2provider/components/themes/oauth2LogoutScreen/index.d.ts
 create mode 100644 lib/build/recipe/oauth2provider/components/themes/themeBase.d.ts
 create mode 100644 lib/ts/components/assets/logoutIcon.tsx
 create mode 100644 lib/ts/recipe/oauth2provider/components/features/oauth2LogoutScreen/index.tsx
 create mode 100644 lib/ts/recipe/oauth2provider/components/themes/oauth2LogoutScreen/OAuth2LogoutScreenInner.tsx
 create mode 100644 lib/ts/recipe/oauth2provider/components/themes/oauth2LogoutScreen/index.tsx
 create mode 100644 lib/ts/recipe/oauth2provider/components/themes/styles.css
 create mode 100644 lib/ts/recipe/oauth2provider/components/themes/themeBase.tsx
 create mode 100644 stories/oauth2provider.stories.tsx

diff --git a/examples/for-tests/src/OAuth2Page.js b/examples/for-tests/src/OAuth2Page.js
index aa5b03839..3db24f8b8 100644
--- a/examples/for-tests/src/OAuth2Page.js
+++ b/examples/for-tests/src/OAuth2Page.js
@@ -23,7 +23,7 @@ const oidcConfig = {
 };
 
 function AuthPage() {
-    const { signinRedirect, signinSilent, signoutSilent, user, error } = useAuth();
+    const { signinRedirect, signinSilent, signoutSilent, signoutRedirect, user, error } = useAuth();
 
     return (
         <div>
@@ -36,6 +36,9 @@ function AuthPage() {
                         <button id="oauth2-logout-button" onClick={() => signoutSilent(extraSignOutParams)}>
                             Logout
                         </button>
+                        <button id="oauth2-logout-button-redirect" onClick={() => signoutRedirect(extraSignOutParams)}>
+                            Logout (Redirect)
+                        </button>
                     </>
                 )}
                 <button id="oauth2-login-button" onClick={() => signinRedirect(extraSignInParams)}>
diff --git a/lib/build/components/assets/logoutIcon.d.ts b/lib/build/components/assets/logoutIcon.d.ts
new file mode 100644
index 000000000..4f3513ab8
--- /dev/null
+++ b/lib/build/components/assets/logoutIcon.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function LogoutIcon(): JSX.Element;
diff --git a/lib/build/oauth2provider-shared.js b/lib/build/oauth2provider-shared.js
index ce379f3d3..1c266487a 100644
--- a/lib/build/oauth2provider-shared.js
+++ b/lib/build/oauth2provider-shared.js
@@ -33,6 +33,25 @@ var getFunctionOverrides = function (onHandleEvent) {
                     });
                 });
             },
+            logOut: function (input) {
+                return genericComponentOverrideContext.__awaiter(this, void 0, void 0, function () {
+                    var response;
+                    return genericComponentOverrideContext.__generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                return [4 /*yield*/, originalImp.logOut(input)];
+                            case 1:
+                                response = _a.sent();
+                                onHandleEvent({
+                                    action: "OAUTH2_LOGOUT_SUCCESS",
+                                    frontendRedirectTo: response.frontendRedirectTo,
+                                    userContext: input.userContext,
+                                });
+                                return [2 /*return*/, response];
+                        }
+                    });
+                });
+            },
         });
     };
 };
@@ -49,6 +68,10 @@ function normaliseOAuth2Config(config) {
                 (_a = config === null || config === void 0 ? void 0 : config.disableDefaultUI) !== null && _a !== void 0
                     ? _a
                     : false,
+            oauth2LogoutScreen: genericComponentOverrideContext.__assign(
+                { disableDefaultUI: false, style: "" },
+                config === null || config === void 0 ? void 0 : config.oauth2LogoutScreen
+            ),
             override: genericComponentOverrideContext.__assign(
                 {
                     functions: function (originalImplementation) {
@@ -146,6 +169,8 @@ var OAuth2Provider = /** @class */ (function (_super) {
                         2 /*return*/,
                         "".concat(domain).concat(basePath, "/oauth/login?loginChallenge=").concat(ctx.loginChallenge),
                     ];
+                } else if (ctx.action === "POST_OAUTH2_LOGOUT_REDIRECT") {
+                    return [2 /*return*/, ctx.frontendRedirectTo];
                 } else {
                     throw new Error(
                         "Should never come here: unknown action in OAuth2Provider.getDefaultRedirectionURL"
diff --git a/lib/build/oauth2provider.js b/lib/build/oauth2provider.js
index 9be189f33..8127cd159 100644
--- a/lib/build/oauth2provider.js
+++ b/lib/build/oauth2provider.js
@@ -53,13 +53,31 @@ var Wrapper = /** @class */ (function () {
     Wrapper.getLoginChallengeInfo = function (input) {
         return recipe.OAuth2Provider.getInstanceOrThrow().webJSRecipe.getLoginChallengeInfo(input);
     };
+    /**
+     * Accepts the OAuth2 Logout request, clears the SuperTokens session and returns post logout redirect URL.
+     *
+     * @param logoutChallenge The logout challenge from the url
+     *
+     * @param userContext (OPTIONAL) Refer to {@link https://supertokens.com/docs/emailpassword/advanced-customizations/user-context the documentation}
+     *
+     * @param options (OPTIONAL) Use this to configure additional properties (for example pre api hooks)
+     *
+     * @returns `{status: "OK", frontendRedirectTo: string}`
+     *
+     * @throws STGeneralError if the API exposed by the backend SDKs returns `status: "GENERAL_ERROR"`
+     */
+    Wrapper.logOut = function (input) {
+        return recipe.OAuth2Provider.getInstanceOrThrow().webJSRecipe.logOut(input);
+    };
     Wrapper.ComponentsOverrideProvider = componentOverrideContext.Provider;
     return Wrapper;
 })();
 var init = Wrapper.init;
 var getLoginChallengeInfo = Wrapper.getLoginChallengeInfo;
+var logOut = Wrapper.logOut;
 
 exports.RecipeComponentsOverrideContextProvider = componentOverrideContext.Provider;
 exports.default = Wrapper;
 exports.getLoginChallengeInfo = getLoginChallengeInfo;
 exports.init = init;
+exports.logOut = logOut;
diff --git a/lib/build/oauth2providerprebuiltui.js b/lib/build/oauth2providerprebuiltui.js
index c81dbc606..545ede489 100644
--- a/lib/build/oauth2providerprebuiltui.js
+++ b/lib/build/oauth2providerprebuiltui.js
@@ -8,6 +8,8 @@ var session = require("./session.js");
 var componentOverrideContext = require("./oauth2provider-shared2.js");
 var React = require("react");
 var recipe = require("./oauth2provider-shared.js");
+var translationContext = require("./translationContext.js");
+var button = require("./emailpassword-shared.js");
 require("supertokens-web-js");
 require("supertokens-web-js/utils/cookieHandler");
 require("supertokens-web-js/utils/postSuperTokensInitCallbacks");
@@ -15,7 +17,6 @@ require("supertokens-web-js/utils/windowHandler");
 require("supertokens-web-js/recipe/multitenancy");
 require("supertokens-web-js/utils");
 require("supertokens-web-js/utils/normalisedURLDomain");
-require("./translationContext.js");
 require("react-dom");
 require("./multitenancy-shared.js");
 require("./multifactorauth-shared2.js");
@@ -62,8 +63,264 @@ function _interopNamespace(e) {
 var NormalisedURLPath__default = /*#__PURE__*/ _interopDefault(NormalisedURLPath);
 var React__namespace = /*#__PURE__*/ _interopNamespace(React);
 
+var styles =
+    '/* Copyright (c) 2024, VRAI Labs and/or its affiliates. All rights reserved.\n *\n * This software is licensed under the Apache License, Version 2.0 (the\n * "License") as published by the Apache Software Foundation.\n *\n * You may not use this file except in compliance with the License. You may\n * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations\n * under the License.\n */\n\n[data-supertokens~="container"] {\n    --palette-background: 255, 255, 255;\n    --palette-inputBackground: 250, 250, 250;\n    --palette-inputBorder: 224, 224, 224;\n    --palette-primary: 255, 155, 51;\n    --palette-primaryBorder: 238, 141, 35;\n    --palette-success: 65, 167, 0;\n    --palette-successBackground: 217, 255, 191;\n    --palette-error: 255, 23, 23;\n    --palette-errorBackground: 255, 241, 235;\n    --palette-textTitle: 34, 34, 34;\n    --palette-textLabel: 34, 34, 34;\n    --palette-textInput: 34, 34, 34;\n    --palette-textPrimary: 101, 101, 101;\n    --palette-textLink: 0, 118, 255;\n    --palette-buttonText: 255, 255, 255;\n    --palette-textGray: 128, 128, 128;\n    --palette-superTokensBrandingBackground: 242, 245, 246;\n    --palette-superTokensBrandingText: 173, 189, 196;\n\n    --font-size-0: 12px;\n    --font-size-1: 14px;\n    --font-size-2: 16px;\n    --font-size-3: 19px;\n    --font-size-4: 24px;\n}\n\n/*\n * Default styles.\n */\n\n@keyframes slideTop {\n    0% {\n        transform: translateY(-5px);\n    }\n    100% {\n        transform: translateY(0px);\n    }\n}\n\n@keyframes swing-in-top-fwd {\n    0% {\n        transform: rotateX(-100deg);\n        transform-origin: top;\n        opacity: 0;\n    }\n    100% {\n        transform: rotateX(0deg);\n        transform-origin: top;\n        opacity: 1;\n    }\n}\n\n[data-supertokens~="container"] {\n    font-family: "Rubik", sans-serif;\n    margin: 12px auto;\n    margin-top: 26px;\n    margin-bottom: 26px;\n    width: 420px;\n    text-align: center;\n    border-radius: 8px;\n    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.16);\n    background-color: rgb(var(--palette-background));\n}\n\n@media (max-width: 440px) {\n    [data-supertokens~="container"] {\n        width: 95vw;\n    }\n}\n\n[data-supertokens~="row"] {\n    margin: 0 auto;\n    width: 76%;\n    padding-top: 30px;\n    padding-bottom: 10px;\n}\n\n[data-supertokens~="superTokensBranding"] {\n    display: block;\n    margin: 10px auto 0;\n    background: rgb(var(--palette-superTokensBrandingBackground));\n    color: rgb(var(--palette-superTokensBrandingText));\n    text-decoration: none;\n    width: -webkit-fit-content;\n    width: -moz-fit-content;\n    width: fit-content;\n    border-radius: 6px 6px 0 0;\n    padding: 4px 9px;\n    font-weight: 400;\n    font-size: var(--font-size-0);\n    letter-spacing: 0.4px;\n}\n\n[data-supertokens~="generalError"] {\n    background: rgb(var(--palette-errorBackground));\n    padding-top: 10px;\n    padding-bottom: 10px;\n    margin-bottom: 10px;\n    margin-top: 24px;\n    padding-left: 18px;\n    padding-right: 18px;\n    letter-spacing: 0.2px;\n    font-size: var(--font-size-1);\n    border-radius: 8px;\n    color: rgb(var(--palette-error));\n    animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\n    word-wrap: break-word;\n}\n\n[data-supertokens~="headerTitle"] {\n    font-size: var(--font-size-4);\n    line-height: 40px;\n    letter-spacing: 0.58px;\n    font-weight: 500;\n    margin-bottom: 2px;\n    color: rgb(var(--palette-textTitle));\n}\n\n[data-supertokens~="headerSubtitle"] {\n    font-weight: 400;\n    color: rgb(var(--palette-textGray));\n    margin-bottom: 21px;\n}\n\n[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {\n    color: rgb(var(--palette-textGray));\n    font-weight: 400;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] {\n    max-width: 300px;\n    margin-top: 10px;\n}\n\n[data-supertokens~="privacyPolicyAndTermsAndConditions"] a {\n    line-height: 21px;\n}\n\n/* TODO: split the link style into separate things*/\n\n/* We add this before primary and secondary text, because if they are applied to the same element the other ones take priority */\n\n[data-supertokens~="link"] {\n    padding-left: 3px;\n    padding-right: 3px;\n    color: rgb(var(--palette-textLink));\n    font-size: var(--font-size-1);\n    cursor: pointer;\n    letter-spacing: 0.16px;\n    line-height: 26px;\n}\n\n[data-supertokens~="primaryText"] {\n    font-size: var(--font-size-1);\n    font-weight: 500;\n    letter-spacing: 0.4px;\n    line-height: 21px;\n    color: rgb(var(--palette-textLabel));\n}\n\n[data-supertokens~="secondaryText"] {\n    font-size: var(--font-size-1);\n    font-weight: 300;\n    letter-spacing: 0.4px;\n    color: rgb(var(--palette-textPrimary));\n}\n\n[data-supertokens~="secondaryText"] strong {\n    font-weight: 500;\n}\n\n[data-supertokens~="divider"] {\n    margin-top: 1.5em;\n    margin-bottom: 1.5em;\n    border-bottom: 0.3px solid #dddddd;\n    align-items: center;\n    padding-bottom: 5px;\n    flex: 3 3;\n}\n\n[data-supertokens~="headerTinyTitle"] {\n    margin-top: 13px;\n    font-size: var(--font-size-3);\n    letter-spacing: 1.1px;\n    font-weight: 500;\n    line-height: 28px;\n}\n\n[data-supertokens~="secondaryLinkWithArrow"] {\n    margin-top: 10px;\n    margin-bottom: 30px;\n    cursor: pointer;\n}\n\n[data-supertokens~="secondaryLinkWithArrow"]:hover {\n    position: relative;\n    left: 2px;\n    word-spacing: 4px;\n}\n\n[data-supertokens~="generalSuccess"] {\n    color: rgb(var(--palette-success));\n    font-size: var(--font-size-1);\n    background: rgb(var(--palette-successBackground));\n    animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\n    padding: 9px 15px 9px 15px;\n    border-radius: 6px;\n    display: inline-block;\n}\n\n[data-supertokens~="spinner"] {\n    width: 80px;\n    height: auto;\n    padding-top: 20px;\n    padding-bottom: 40px;\n    margin: 0 auto;\n}\n\n[data-supertokens~="error"] {\n    color: rgb(var(--palette-error));\n}\n\n[data-supertokens~="linkButton"] {\n    font-family: "Rubik", sans-serif;\n    background-color: transparent;\n    border: 0;\n}\n\n[data-supertokens~="secondaryLinkWithLeftArrow"] {\n    color: rgb(var(--palette-textGray));\n    font-weight: 500;\n    margin-top: 10px;\n    margin-bottom: 40px;\n    cursor: pointer;\n}\n\n[data-supertokens~="secondaryLinkWithLeftArrow"] svg {\n    margin-right: 0.3em;\n}\n\n[data-supertokens~="secondaryLinkWithLeftArrow"]:hover svg {\n    position: relative;\n    left: -4px;\n}\n\n[data-supertokens~="button"] {\n    font-family: "Rubik", sans-serif;\n    background-color: rgb(var(--palette-primary));\n    color: rgb(var(--palette-buttonText));\n    width: 100%;\n    height: 34px;\n    font-weight: 700;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: 6px;\n    border-color: rgb(var(--palette-primaryBorder));\n    background-position: center;\n    transition: all 0.4s;\n    background-size: 12000%;\n    cursor: pointer;\n}\n\n[data-supertokens~="button"]:disabled {\n    border: none;\n    cursor: no-drop;\n}\n\n[data-supertokens~="button"]:active {\n    outline: none;\n    transition: all 0s;\n    background-size: 100%;\n    filter: brightness(0.85);\n}\n\n[data-supertokens~="button"]:focus {\n    outline: none;\n}\n\n[data-supertokens~="backButtonCommon"] {\n    width: 16px;\n    height: 13px;\n}\n\n[data-supertokens~="backButton"] {\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n    padding: 0px;\n}\n\n[data-supertokens~="backButtonPlaceholder"] {\n    display: block;\n}\n\n[data-supertokens~="delayedRender"] {\n    animation-duration: 0.1s;\n    animation-name: animate-fade;\n    animation-delay: 0.2s;\n    animation-fill-mode: backwards;\n}\n\n@keyframes animate-fade {\n    0% {\n        opacity: 0;\n    }\n    100% {\n        opacity: 1;\n    }\n}\n\n[data-supertokens~="footerLinkGroupVert"] {\n    display: flex;\n    flex-direction: column;\n    margin-top: 10px;\n    gap: 24px;\n}\n\n[data-supertokens~="footerLinkGroupVert"] > div {\n    cursor: pointer;\n    margin: 0;\n}\n\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryText"] {\n    font-weight: 400;\n}\n\n[data-supertokens~="footerLinkGroupVert"] [data-supertokens~="secondaryLinkWithLeftArrow"] {\n    font-weight: 500;\n    position: relative;\n    left: -6px; /* half the width of the left arrow */\n}\n\n@media (max-width: 360px) {\n    [data-supertokens~="footerLinkGroupVert"] {\n        flex-direction: column;\n    }\n    [data-supertokens~="footerLinkGroupVert"] > div {\n        margin: 0 auto;\n    }\n}\n\n[data-supertokens~="footerLinkGroupVert"] div:only-child {\n    margin-left: auto;\n    margin-right: auto;\n    margin-top: 14px;\n}\n\n[data-supertokens~="withBackButton"] {\n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n[data-supertokens~="dividerWithOr"] {\n    padding-top: 5px;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    color: rgb(var(--palette-textPrimary));\n}\n\n[data-supertokens~="dividerText"] {\n    flex: 1 1;\n}\n\n[data-supertokens~="formLabelWithLinkWrapper"] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n[data-supertokens~="formLabelLinkBtn"] {\n    width: auto;\n    margin-top: 0;\n    line-height: 24px;\n}\n\n[data-supertokens~="formLabelLinkBtn"]:hover {\n    text-decoration: underline;\n}\n\n[data-supertokens~="formLabelLinkBtn"]:disabled {\n    color: rgb(var(--palette-textPrimary));\n    cursor: default;\n    text-decoration: none;\n}\n\n[data-supertokens~="authComponentList"] {\n    padding-bottom: 20px;\n}\n\n[data-supertokens~="authPageTitleOAuthClient"] {\n    color: rgb(var(--palette-textGray));\n    font-size: var(--font-size-1);\n    font-weight: 400;\n    margin: 10px 0 25px;\n}\n\n[data-supertokens~="authPageTitleOAuthClientUrl"] {\n    text-decoration: none;\n}\n\n[data-supertokens~="authPageTitleOAuthClientLogo"] {\n    width: 44px;\n    height: 44px;\n    margin-bottom: 10px;\n}\n\n[data-supertokens~="authPageTitleOAuthClient"] [data-supertokens~="authPageTitleOAuthClientName"] {\n    color: rgb(var(--palette-textTitle));\n}\n\n[data-supertokens~="logoutIcon"] {\n    padding: 18px 20px 18px 24px;\n    background-color: rgba(var(--palette-textGray), 0.1);\n    border-radius: 12px;\n}\n\n[data-supertokens~="oauth2Logout"] [data-supertokens~="headerTitle"] {\n    margin-top: 24px;\n    margin-bottom: 24px;\n}\n\n[data-supertokens~="oauth2Logout"] [data-supertokens~="button"] {\n    margin-bottom: 24px;\n}\n';
+
+var ThemeBase = function (_a) {
+    var children = _a.children,
+        userStyles = _a.userStyles;
+    return jsxRuntime.jsxs(React.Fragment, {
+        children: [children, jsxRuntime.jsxs("style", { children: [styles, userStyles.join("\n")] })],
+    });
+};
+
+/* Copyright (c) 2024, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+function LogoutIcon() {
+    return jsxRuntime.jsx(
+        "svg",
+        genericComponentOverrideContext.__assign(
+            {
+                "data-supertokens": "logoutIcon",
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "40",
+                height: "38",
+                fill: "none",
+            },
+            {
+                children: jsxRuntime.jsx("path", {
+                    fill: "rgb(var(--palette-textGray))",
+                    "fill-rule": "evenodd",
+                    d: "M2.972.022a.874.874 0 0 1-.23.062c-.234.042-.926.362-1.148.53a4.638 4.638 0 0 0-.656.63c-.178.228-.415.681-.495.948l-.116.378C.272 2.742.27 32.075.326 32.251l.111.37c.165.559.636 1.207 1.133 1.558a3.9 3.9 0 0 1 .195.145c.048.046.368.206.588.292l.196.08c.036.016.183.063.326.105.144.042.295.093.337.113.041.02.11.037.154.037s.098.015.12.034c.023.019.218.087.434.15.215.065.43.133.478.153.048.019.254.085.457.146.204.06.404.128.446.148.041.021.11.038.154.038s.098.015.12.034c.023.02.16.069.303.11.144.041.295.092.337.112.041.02.11.037.154.037s.098.015.12.034c.023.018.218.086.434.15.215.065.43.133.478.152.048.02.254.086.457.148.204.062.404.129.446.148a.45.45 0 0 0 .163.037c.048 0 .088.018.088.041 0 .023.034.043.076.043.042 0 .213.048.38.104.168.057.34.104.381.104.042 0 .076.02.076.042 0 .023.04.042.088.042.048 0 .122.017.163.038.042.02.193.07.337.11.274.076.366.106.544.176.06.024.285.096.5.16.216.064.41.132.433.15a.224.224 0 0 0 .12.035.4.4 0 0 1 .155.04c.042.02.193.07.337.108.144.038.3.084.348.103.178.07.613.125.954.122.365-.004.908-.078.965-.133a.16.16 0 0 1 .096-.031c.08 0 .707-.291.784-.364.032-.03.073-.054.09-.054.053 0 .632-.55.748-.71.195-.27.432-.71.432-.803 0-.04.02-.083.044-.097.024-.014.043-.077.043-.14 0-.063.023-.137.05-.163.034-.033.059-.404.077-1.148l.026-1.1 2.894-.023c2.31-.02 2.939-.037 3.119-.084.123-.033.24-.074.257-.091.018-.017.077-.031.132-.031.054 0 .11-.02.125-.042.015-.023.055-.042.089-.042.19 0 1.14-.54 1.493-.849.456-.398.898-.926 1.095-1.304a.916.916 0 0 1 .088-.147c.02-.018.06-.104.219-.48.02-.047.059-.16.088-.252.029-.091.069-.214.09-.271.125-.356.146-.97.146-4.265 0-3.563-.003-3.626-.205-3.987-.204-.364-.756-.78-1.036-.78-.045 0-.093-.019-.108-.042-.035-.054-.661-.054-.696 0-.015.023-.066.042-.113.042-.256 0-.85.449-1.002.757-.253.514-.256.568-.256 4.24v3.287l-.11.222c-.06.123-.186.306-.28.408-.171.188-.551.41-.7.41-.044 0-.092.02-.107.042-.018.027-.943.042-2.635.042h-2.608l-.011-12.165c-.01-9.665-.023-12.176-.066-12.218a.236.236 0 0 1-.055-.149.426.426 0 0 0-.039-.169 4.357 4.357 0 0 1-.118-.26c-.201-.477-.692-1.057-1.127-1.332a2.216 2.216 0 0 1-.196-.134c-.054-.058-.664-.307-.848-.346-.048-.01 1.66-.021 3.795-.024 2.546-.003 3.89.01 3.908.037.015.023.064.042.11.042.19 0 .646.313.82.561.274.39.267.31.267 3.032 0 2.402.02 2.851.14 3.139.245.59.71.966 1.318 1.068.33.055.642.012.979-.134.242-.105.696-.489.696-.588 0-.03.015-.054.033-.054.042 0 .166-.305.213-.522.058-.272.046-5.251-.015-5.666a4.778 4.778 0 0 0-.27-1.066 9.014 9.014 0 0 0-.397-.773 2.902 2.902 0 0 1-.161-.23 3.223 3.223 0 0 0-.298-.377 7.831 7.831 0 0 1-.23-.25c-.149-.175-.564-.502-.91-.717a5.197 5.197 0 0 0-.38-.224c-.011 0-.133-.05-.271-.11a4.346 4.346 0 0 0-.98-.319C22.442.018 3.025-.029 2.973.022Zm28.17 7.903c-.364.092-.514.172-.764.407-.225.21-.38.445-.487.737-.04.11-.054.77-.055 2.645v2.498h-3.457c-2.258 0-3.467.015-3.485.042-.014.023-.063.042-.107.042-.138 0-.449.18-.655.379-.194.187-.38.497-.474.794-.06.187-.062.653-.004.687.024.015.044.06.044.102 0 .17.198.495.443.724.141.132.285.24.32.24.035 0 .063.02.063.042 0 .023.036.042.08.042.044 0 .094.014.111.03.125.12.504.134 3.78.136l3.34.001.014 2.52c.015 2.39.032 2.79.122 2.79.021 0 .039.038.039.084 0 .046.02.084.043.084.024 0 .044.026.044.058 0 .073.476.527.552.527.032 0 .057.016.057.036 0 .02.108.069.24.109.35.106 1.009.076 1.305-.059.175-.08.895-.75 3.656-3.406 1.89-1.82 3.487-3.373 3.548-3.454.278-.37.388-.944.256-1.342-.15-.456-.165-.47-3.737-3.915-1.915-1.846-3.511-3.356-3.547-3.356-.037 0-.067-.014-.067-.031 0-.074-.636-.261-.87-.256-.06.001-.217.03-.349.063Z",
+                    "clip-rule": "evenodd",
+                }),
+            }
+        )
+    );
+}
+
+var OAuth2LogoutScreenInner = uiEntry.withOverride("OAuth2LogoutScreenInner", function OAuth2LogoutScreenInner(props) {
+    var t = translationContext.useTranslation();
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            jsxRuntime.jsx(LogoutIcon, {}),
+            jsxRuntime.jsx(
+                "div",
+                genericComponentOverrideContext.__assign(
+                    { "data-supertokens": "headerTitle" },
+                    { children: t("LOGGING_OUT") }
+                )
+            ),
+            jsxRuntime.jsx(
+                "div",
+                genericComponentOverrideContext.__assign(
+                    { "data-supertokens": "headerSubtitle" },
+                    { children: t("LOGOUT_CONFIRMATION") }
+                )
+            ),
+            jsxRuntime.jsx("div", { "data-supertokens": "divider" }),
+            jsxRuntime.jsx(button.Button, {
+                disabled: props.isLoggingOut,
+                isLoading: props.isLoggingOut,
+                type: "button",
+                label: t("LOGOUT"),
+                onClick: props.onLogoutClicked,
+            }),
+        ],
+    });
+});
+
+var OAuth2LogoutScreen$1 = function (props) {
+    if (props.showSpinner) {
+        return jsxRuntime.jsx(uiEntry.DynamicLoginMethodsSpinner, {});
+    }
+    return jsxRuntime.jsxs(
+        "div",
+        genericComponentOverrideContext.__assign(
+            { "data-supertokens": "oauth2Logout container" },
+            {
+                children: [
+                    jsxRuntime.jsx(
+                        "div",
+                        genericComponentOverrideContext.__assign(
+                            { "data-supertokens": "row" },
+                            {
+                                children: jsxRuntime.jsx(OAuth2LogoutScreenInner, {
+                                    isLoggingOut: props.isLoggingOut,
+                                    onLogoutClicked: props.onLogoutClicked,
+                                }),
+                            }
+                        )
+                    ),
+                    jsxRuntime.jsx(uiEntry.SuperTokensBranding, {}),
+                ],
+            }
+        )
+    );
+};
+var OAuth2LogoutScreenTheme = function (props) {
+    var rootStyle = genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().rootStyle;
+    return jsxRuntime.jsx(
+        ThemeBase,
+        genericComponentOverrideContext.__assign(
+            { userStyles: [rootStyle, props.config.recipeRootStyle, props.config.oauth2LogoutScreen.style] },
+            { children: jsxRuntime.jsx(OAuth2LogoutScreen$1, genericComponentOverrideContext.__assign({}, props)) }
+        )
+    );
+};
+
 var defaultTranslationsOAuth2Provider = {
-    en: {},
+    en: genericComponentOverrideContext.__assign(
+        genericComponentOverrideContext.__assign({}, uiEntry.defaultTranslationsCommon.en),
+        { LOGGING_OUT: "Logging Out", LOGOUT_CONFIRMATION: "Are you sure you want to log out?", LOGOUT: "LOG OUT" }
+    ),
+};
+
+var OAuth2LogoutScreen = function (props) {
+    var _a, _b, _c;
+    var rethrowInRender = genericComponentOverrideContext.useRethrowInRender();
+    var sessionContext = React__namespace.useContext(uiEntry.SessionContext);
+    var _d = React__namespace.useState(false),
+        isLoggingOut = _d[0],
+        setIsLoggingOut = _d[1];
+    var recipeComponentOverrides = props.useComponentOverrides();
+    var userContext = uiEntry.useUserContext();
+    if (props.userContext !== undefined) {
+        userContext = props.userContext;
+    }
+    var logoutChallenge =
+        (_a = genericComponentOverrideContext.getQueryParams("logoutChallenge")) !== null && _a !== void 0
+            ? _a
+            : undefined;
+    var navigate =
+        (_b = props.navigate) !== null && _b !== void 0
+            ? _b
+            : (_c = uiEntry.UI.getReactRouterDomWithCustomHistory()) === null || _c === void 0
+            ? void 0
+            : _c.useHistoryCustom();
+    var onLogout = React__namespace.useCallback(
+        function () {
+            return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () {
+                var frontendRedirectTo, err_1;
+                return genericComponentOverrideContext.__generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (logoutChallenge === undefined) {
+                                return [2 /*return*/];
+                            }
+                            setIsLoggingOut(true);
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 4, , 5]);
+                            return [
+                                4 /*yield*/,
+                                recipe.OAuth2Provider.getInstanceOrThrow().webJSRecipe.logOut({
+                                    logoutChallenge: logoutChallenge,
+                                    userContext: userContext,
+                                }),
+                            ];
+                        case 2:
+                            frontendRedirectTo = _a.sent().frontendRedirectTo;
+                            return [
+                                4 /*yield*/,
+                                props.recipe.redirect(
+                                    {
+                                        recipeId: "oauth2provider",
+                                        action: "POST_OAUTH2_LOGOUT_REDIRECT",
+                                        frontendRedirectTo: frontendRedirectTo,
+                                    },
+                                    navigate,
+                                    {},
+                                    userContext
+                                ),
+                            ];
+                        case 3:
+                            _a.sent();
+                            return [3 /*break*/, 5];
+                        case 4:
+                            err_1 = _a.sent();
+                            rethrowInRender(err_1);
+                            return [3 /*break*/, 5];
+                        case 5:
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        },
+        [logoutChallenge, navigate, props.recipe, userContext, rethrowInRender]
+    );
+    React__namespace.useEffect(
+        function () {
+            // Redirect to the auth page if there is no logoutChallenge
+            if (logoutChallenge === undefined) {
+                void genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().redirectToAuth({
+                    userContext: userContext,
+                    redirectBack: false,
+                });
+            }
+            // Call logOut directly if there is no session
+            if (sessionContext.loading === false && sessionContext.doesSessionExist === false) {
+                void onLogout();
+            }
+        },
+        [userContext, logoutChallenge, sessionContext, onLogout]
+    );
+    var childProps = {
+        config: props.recipe.config,
+        showSpinner: sessionContext.loading || sessionContext.doesSessionExist === false,
+        onLogoutClicked: onLogout,
+        isLoggingOut: isLoggingOut,
+    };
+    if (logoutChallenge === undefined) {
+        return null;
+    }
+    return jsxRuntime.jsx(
+        uiEntry.ComponentOverrideContext.Provider,
+        genericComponentOverrideContext.__assign(
+            { value: recipeComponentOverrides },
+            {
+                children: jsxRuntime.jsx(
+                    uiEntry.FeatureWrapper,
+                    genericComponentOverrideContext.__assign(
+                        {
+                            useShadowDom: genericComponentOverrideContext.SuperTokens.getInstanceOrThrow().useShadowDom,
+                            defaultStore: defaultTranslationsOAuth2Provider,
+                        },
+                        {
+                            children: jsxRuntime.jsxs(React.Fragment, {
+                                children: [
+                                    props.children === undefined &&
+                                        jsxRuntime.jsx(
+                                            OAuth2LogoutScreenTheme,
+                                            genericComponentOverrideContext.__assign({}, childProps)
+                                        ),
+                                    props.children &&
+                                        React__namespace.Children.map(props.children, function (child) {
+                                            if (React__namespace.isValidElement(child)) {
+                                                return React__namespace.cloneElement(child, childProps);
+                                            }
+                                            return child;
+                                        }),
+                                ],
+                            }),
+                        }
+                    )
+                ),
+            }
+        )
+    );
 };
 
 var TryRefreshPage$1 = function (props) {
@@ -140,6 +397,7 @@ var TryRefreshPage$1 = function (props) {
  * under the License.
  */
 var DEFAULT_TRY_REFRESH_PATH = "/try-refresh";
+var DEFAULT_OAUTH2_LOGOUT_PATH = "/oauth/logout";
 
 var OAuth2ProviderPreBuiltUI = /** @class */ (function (_super) {
     genericComponentOverrideContext.__extends(OAuth2ProviderPreBuiltUI, _super);
@@ -167,48 +425,97 @@ var OAuth2ProviderPreBuiltUI = /** @class */ (function (_super) {
                     recipeID: recipe.OAuth2Provider.RECIPE_ID,
                 };
             }
+            if (_this.recipeInstance.config.oauth2LogoutScreen.disableDefaultUI !== true) {
+                var normalisedFullPath = _this.recipeInstance.config.appInfo.websiteBasePath.appendPath(
+                    new NormalisedURLPath__default.default(DEFAULT_OAUTH2_LOGOUT_PATH)
+                );
+                features[normalisedFullPath.getAsStringDangerous()] = {
+                    matches: genericComponentOverrideContext.matchRecipeIdUsingQueryParams(
+                        _this.recipeInstance.config.recipeId
+                    ),
+                    component: function (props) {
+                        return _this.getFeatureComponent("oauth2-logout-screen", props, useComponentOverrides);
+                    },
+                    recipeID: recipe.OAuth2Provider.RECIPE_ID,
+                };
+            }
             return features;
         };
         _this.getFeatureComponent = function (
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            _,
+            componentName,
             props,
             useComponentOverrides
         ) {
             if (useComponentOverrides === void 0) {
                 useComponentOverrides = componentOverrideContext.useContext;
             }
-            return jsxRuntime.jsx(
-                uiEntry.UserContextWrapper,
-                genericComponentOverrideContext.__assign(
-                    { userContext: props.userContext },
-                    {
-                        children: jsxRuntime.jsx(
-                            session.SessionAuth,
-                            genericComponentOverrideContext.__assign(
-                                {
-                                    requireAuth: false,
-                                    overrideGlobalClaimValidators: function () {
-                                        return [];
+            if (componentName === "try-refresh-page") {
+                return jsxRuntime.jsx(
+                    uiEntry.UserContextWrapper,
+                    genericComponentOverrideContext.__assign(
+                        { userContext: props.userContext },
+                        {
+                            children: jsxRuntime.jsx(
+                                session.SessionAuth,
+                                genericComponentOverrideContext.__assign(
+                                    {
+                                        requireAuth: false,
+                                        overrideGlobalClaimValidators: function () {
+                                            return [];
+                                        },
                                     },
-                                },
-                                {
-                                    children: jsxRuntime.jsx(
-                                        TryRefreshPage$1,
-                                        genericComponentOverrideContext.__assign(
-                                            {
-                                                recipe: _this.recipeInstance,
-                                                useComponentOverrides: useComponentOverrides,
-                                            },
-                                            props
-                                        )
-                                    ),
-                                }
-                            )
-                        ),
-                    }
-                )
-            );
+                                    {
+                                        children: jsxRuntime.jsx(
+                                            TryRefreshPage$1,
+                                            genericComponentOverrideContext.__assign(
+                                                {
+                                                    recipe: _this.recipeInstance,
+                                                    useComponentOverrides: useComponentOverrides,
+                                                },
+                                                props
+                                            )
+                                        ),
+                                    }
+                                )
+                            ),
+                        }
+                    )
+                );
+            } else if (componentName === "oauth2-logout-screen") {
+                return jsxRuntime.jsx(
+                    uiEntry.UserContextWrapper,
+                    genericComponentOverrideContext.__assign(
+                        { userContext: props.userContext },
+                        {
+                            children: jsxRuntime.jsx(
+                                session.SessionAuth,
+                                genericComponentOverrideContext.__assign(
+                                    {
+                                        requireAuth: false,
+                                        overrideGlobalClaimValidators: function () {
+                                            return [];
+                                        },
+                                    },
+                                    {
+                                        children: jsxRuntime.jsx(
+                                            OAuth2LogoutScreen,
+                                            genericComponentOverrideContext.__assign(
+                                                {
+                                                    recipe: _this.recipeInstance,
+                                                    useComponentOverrides: useComponentOverrides,
+                                                },
+                                                props
+                                            )
+                                        ),
+                                    }
+                                )
+                            ),
+                        }
+                    )
+                );
+            }
+            throw new Error("Should never come here.");
         };
         return _this;
     }
@@ -253,6 +560,12 @@ var OAuth2ProviderPreBuiltUI = /** @class */ (function (_super) {
             props
         );
     };
+    OAuth2ProviderPreBuiltUI.OAuth2LogoutScreen = function (props) {
+        return OAuth2ProviderPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatureComponent(
+            "oauth2-logout-screen",
+            props
+        );
+    };
     return OAuth2ProviderPreBuiltUI;
 })(uiEntry.RecipeRouter);
 var TryRefreshPage = OAuth2ProviderPreBuiltUI.TryRefreshPage;
diff --git a/lib/build/recipe/oauth2provider/components/features/oauth2LogoutScreen/index.d.ts b/lib/build/recipe/oauth2provider/components/features/oauth2LogoutScreen/index.d.ts
new file mode 100644
index 000000000..6b278cc3f
--- /dev/null
+++ b/lib/build/recipe/oauth2provider/components/features/oauth2LogoutScreen/index.d.ts
@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { FeatureBaseProps, UserContext } from "../../../../../types";
+import type Recipe from "../../../recipe";
+import type { ComponentOverrideMap } from "../../../types";
+declare type Prop = FeatureBaseProps<{
+    recipe: Recipe;
+    userContext?: UserContext;
+    useComponentOverrides: () => ComponentOverrideMap;
+}>;
+export declare const OAuth2LogoutScreen: React.FC<Prop>;
+export default OAuth2LogoutScreen;
diff --git a/lib/build/recipe/oauth2provider/components/themes/oauth2LogoutScreen/OAuth2LogoutScreenInner.d.ts b/lib/build/recipe/oauth2provider/components/themes/oauth2LogoutScreen/OAuth2LogoutScreenInner.d.ts
new file mode 100644
index 000000000..222609ded
--- /dev/null
+++ b/lib/build/recipe/oauth2provider/components/themes/oauth2LogoutScreen/OAuth2LogoutScreenInner.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const OAuth2LogoutScreenInner: import("react").ComponentType<{
+    isLoggingOut: boolean;
+    onLogoutClicked: () => void;
+}>;
diff --git a/lib/build/recipe/oauth2provider/components/themes/oauth2LogoutScreen/index.d.ts b/lib/build/recipe/oauth2provider/components/themes/oauth2LogoutScreen/index.d.ts
new file mode 100644
index 000000000..0fa32a566
--- /dev/null
+++ b/lib/build/recipe/oauth2provider/components/themes/oauth2LogoutScreen/index.d.ts
@@ -0,0 +1,3 @@
+import React from "react";
+import type { OAuth2LogoutScreenThemeProps } from "../../../types";
+export declare const OAuth2LogoutScreenTheme: React.FC<OAuth2LogoutScreenThemeProps>;
diff --git a/lib/build/recipe/oauth2provider/components/themes/themeBase.d.ts b/lib/build/recipe/oauth2provider/components/themes/themeBase.d.ts
new file mode 100644
index 000000000..516a61754
--- /dev/null
+++ b/lib/build/recipe/oauth2provider/components/themes/themeBase.d.ts
@@ -0,0 +1,7 @@
+import React from "react";
+import type { PropsWithChildren } from "react";
+export declare const ThemeBase: React.FC<
+    PropsWithChildren<{
+        userStyles: Array<string | undefined>;
+    }>
+>;
diff --git a/lib/build/recipe/oauth2provider/components/themes/translations.d.ts b/lib/build/recipe/oauth2provider/components/themes/translations.d.ts
index d361acb41..f5122e036 100644
--- a/lib/build/recipe/oauth2provider/components/themes/translations.d.ts
+++ b/lib/build/recipe/oauth2provider/components/themes/translations.d.ts
@@ -1,3 +1,27 @@
 export declare const defaultTranslationsOAuth2Provider: {
-    en: {};
+    en: {
+        LOGGING_OUT: string;
+        LOGOUT_CONFIRMATION: string;
+        LOGOUT: string;
+        AUTH_PAGE_HEADER_TITLE_SIGN_IN_AND_UP: string;
+        AUTH_PAGE_HEADER_TITLE_SIGN_IN: string;
+        AUTH_PAGE_HEADER_TITLE_SIGN_UP: string;
+        AUTH_PAGE_HEADER_TITLE_SIGN_IN_UP_TO_APP: string;
+        AUTH_PAGE_HEADER_SUBTITLE_SIGN_IN_START: string;
+        AUTH_PAGE_HEADER_SUBTITLE_SIGN_IN_SIGN_UP_LINK: string;
+        AUTH_PAGE_HEADER_SUBTITLE_SIGN_IN_END: string;
+        AUTH_PAGE_HEADER_SUBTITLE_SIGN_UP_START: string;
+        AUTH_PAGE_HEADER_SUBTITLE_SIGN_UP_SIGN_IN_LINK: string;
+        AUTH_PAGE_HEADER_SUBTITLE_SIGN_UP_END: string;
+        AUTH_PAGE_FOOTER_START: string;
+        AUTH_PAGE_FOOTER_TOS: string;
+        AUTH_PAGE_FOOTER_AND: string;
+        AUTH_PAGE_FOOTER_PP: string;
+        AUTH_PAGE_FOOTER_END: string;
+        DIVIDER_OR: string;
+        BRANDING_POWERED_BY_START: string;
+        BRANDING_POWERED_BY_END: string;
+        SOMETHING_WENT_WRONG_ERROR: string;
+        SOMETHING_WENT_WRONG_ERROR_RELOAD: string;
+    };
 };
diff --git a/lib/build/recipe/oauth2provider/constants.d.ts b/lib/build/recipe/oauth2provider/constants.d.ts
index 73ebf72dc..4ce4a8095 100644
--- a/lib/build/recipe/oauth2provider/constants.d.ts
+++ b/lib/build/recipe/oauth2provider/constants.d.ts
@@ -1 +1,2 @@
 export declare const DEFAULT_TRY_REFRESH_PATH = "/try-refresh";
+export declare const DEFAULT_OAUTH2_LOGOUT_PATH = "/oauth/logout";
diff --git a/lib/build/recipe/oauth2provider/index.d.ts b/lib/build/recipe/oauth2provider/index.d.ts
index b37e1525a..c776eac18 100644
--- a/lib/build/recipe/oauth2provider/index.d.ts
+++ b/lib/build/recipe/oauth2provider/index.d.ts
@@ -27,6 +27,24 @@ export default class Wrapper {
         info: LoginInfo;
         fetchResponse: Response;
     }>;
+    /**
+     * Accepts the OAuth2 Logout request, clears the SuperTokens session and returns post logout redirect URL.
+     *
+     * @param logoutChallenge The logout challenge from the url
+     *
+     * @param userContext (OPTIONAL) Refer to {@link https://supertokens.com/docs/emailpassword/advanced-customizations/user-context the documentation}
+     *
+     * @param options (OPTIONAL) Use this to configure additional properties (for example pre api hooks)
+     *
+     * @returns `{status: "OK", frontendRedirectTo: string}`
+     *
+     * @throws STGeneralError if the API exposed by the backend SDKs returns `status: "GENERAL_ERROR"`
+     */
+    static logOut(input: { logoutChallenge: string; options?: RecipeFunctionOptions; userContext?: any }): Promise<{
+        status: "OK";
+        frontendRedirectTo: string;
+        fetchResponse: Response;
+    }>;
     static ComponentsOverrideProvider: import("react").FC<
         import("react").PropsWithChildren<{
             components: import("./types").ComponentOverrideMap;
@@ -35,9 +53,11 @@ export default class Wrapper {
 }
 declare const init: typeof Wrapper.init;
 declare const getLoginChallengeInfo: typeof Wrapper.getLoginChallengeInfo;
+declare const logOut: typeof Wrapper.logOut;
 export {
     init,
     getLoginChallengeInfo,
+    logOut,
     GetRedirectionURLContext,
     PreAPIHookContext,
     OnHandleEventContext,
diff --git a/lib/build/recipe/oauth2provider/prebuiltui.d.ts b/lib/build/recipe/oauth2provider/prebuiltui.d.ts
index 51f22d8ff..8b17b7fb5 100644
--- a/lib/build/recipe/oauth2provider/prebuiltui.d.ts
+++ b/lib/build/recipe/oauth2provider/prebuiltui.d.ts
@@ -8,19 +8,43 @@ export declare class OAuth2ProviderPreBuiltUI extends RecipeRouter {
     readonly recipeInstance: OAuth2ProviderRecipe;
     static instance?: OAuth2ProviderPreBuiltUI;
     languageTranslations: {
-        en: {};
+        en: {
+            LOGGING_OUT: string;
+            LOGOUT_CONFIRMATION: string;
+            LOGOUT: string;
+            AUTH_PAGE_HEADER_TITLE_SIGN_IN_AND_UP: string;
+            AUTH_PAGE_HEADER_TITLE_SIGN_IN: string;
+            AUTH_PAGE_HEADER_TITLE_SIGN_UP: string;
+            AUTH_PAGE_HEADER_TITLE_SIGN_IN_UP_TO_APP: string;
+            AUTH_PAGE_HEADER_SUBTITLE_SIGN_IN_START: string;
+            AUTH_PAGE_HEADER_SUBTITLE_SIGN_IN_SIGN_UP_LINK: string;
+            AUTH_PAGE_HEADER_SUBTITLE_SIGN_IN_END: string;
+            AUTH_PAGE_HEADER_SUBTITLE_SIGN_UP_START: string;
+            AUTH_PAGE_HEADER_SUBTITLE_SIGN_UP_SIGN_IN_LINK: string;
+            AUTH_PAGE_HEADER_SUBTITLE_SIGN_UP_END: string;
+            AUTH_PAGE_FOOTER_START: string;
+            AUTH_PAGE_FOOTER_TOS: string;
+            AUTH_PAGE_FOOTER_AND: string;
+            AUTH_PAGE_FOOTER_PP: string;
+            AUTH_PAGE_FOOTER_END: string;
+            DIVIDER_OR: string;
+            BRANDING_POWERED_BY_START: string;
+            BRANDING_POWERED_BY_END: string;
+            SOMETHING_WENT_WRONG_ERROR: string;
+            SOMETHING_WENT_WRONG_ERROR_RELOAD: string;
+        };
     };
     constructor(recipeInstance: OAuth2ProviderRecipe);
     static getInstanceOrInitAndGetInstance(): OAuth2ProviderPreBuiltUI;
     static getFeatures(useComponentOverrides?: () => GenericComponentOverrideMap<any>): RecipeFeatureComponentMap;
     static getFeatureComponent(
-        componentName: "try-refresh-page",
+        componentName: "try-refresh-page" | "oauth2-logout-screen",
         props: any,
         useComponentOverrides?: () => GenericComponentOverrideMap<any>
     ): JSX.Element;
     getFeatures: (useComponentOverrides?: () => GenericComponentOverrideMap<any>) => RecipeFeatureComponentMap;
     getFeatureComponent: (
-        _: "try-refresh-page",
+        componentName: "try-refresh-page" | "oauth2-logout-screen",
         props: FeatureBaseProps<{
             userContext?: UserContext;
         }>,
@@ -33,6 +57,11 @@ export declare class OAuth2ProviderPreBuiltUI extends RecipeRouter {
             userContext?: UserContext;
         }>
     ) => JSX.Element;
+    static OAuth2LogoutScreen: (
+        props: FeatureBaseProps<{
+            userContext?: UserContext;
+        }>
+    ) => JSX.Element;
 }
 declare const TryRefreshPage: (
     props: FeatureBaseProps<{
diff --git a/lib/build/recipe/oauth2provider/types.d.ts b/lib/build/recipe/oauth2provider/types.d.ts
index 874e3fcd5..b7021b276 100644
--- a/lib/build/recipe/oauth2provider/types.d.ts
+++ b/lib/build/recipe/oauth2provider/types.d.ts
@@ -1,11 +1,13 @@
-import type { SuccessRedirectContextOAuth2, UserContext } from "../../types";
+import type { OAuth2LogoutScreenInner } from "./components/themes/oauth2LogoutScreen/OAuth2LogoutScreenInner";
+import type { ComponentOverride } from "../../components/componentOverride/componentOverride";
+import type { NormalisedBaseConfig, SuccessRedirectContextOAuth2, UserContext } from "../../types";
 import type {
     UserInput as RecipeModuleUserInput,
     NormalisedConfig as NormalisedRecipeModuleConfig,
 } from "../recipeModule/types";
 import type OverrideableBuilder from "supertokens-js-override";
 import type { LoginInfo, RecipeInterface } from "supertokens-web-js/recipe/oauth2provider/types";
-export declare type PreAndPostAPIHookAction = "GET_LOGIN_CHALLENGE_INFO";
+export declare type PreAndPostAPIHookAction = "GET_LOGIN_CHALLENGE_INFO" | "LOG_OUT";
 export declare type PreAPIHookContext = {
     action: PreAndPostAPIHookAction;
     requestInit: RequestInit;
@@ -14,6 +16,7 @@ export declare type PreAPIHookContext = {
 };
 export declare type UserInput = {
     disableDefaultUI?: boolean;
+    oauth2LogoutScreen?: Partial<OAuth2LogoutScreenConfig>;
     override?: {
         functions?: (
             originalImplementation: RecipeInterface,
@@ -27,6 +30,7 @@ export declare type NormalisedConfig = NormalisedRecipeModuleConfig<
     OnHandleEventContext
 > & {
     disableDefaultUI: boolean;
+    oauth2LogoutScreen: OAuth2LogoutScreenConfig;
     override: {
         functions: (
             originalImplementation: RecipeInterface,
@@ -34,16 +38,41 @@ export declare type NormalisedConfig = NormalisedRecipeModuleConfig<
         ) => RecipeInterface;
     };
 };
+export declare type OAuth2LogoutScreenConfig = NormalisedBaseConfig & {
+    disableDefaultUI: boolean;
+};
 export declare type ContinueOAuth2AfterRefreshRedirectContext = {
     recipeId: "oauth2provider";
     action: "CONTINUE_OAUTH2_AFTER_REFRESH";
     loginChallenge: string;
 };
-export declare type GetRedirectionURLContext = SuccessRedirectContextOAuth2 | ContinueOAuth2AfterRefreshRedirectContext;
-export declare type OnHandleEventContext = {
-    action: "LOADED_LOGIN_CHALLENGE";
-    loginChallenge: string;
-    loginInfo: LoginInfo;
-    userContext: UserContext;
+export declare type PostOAuth2LogoutRedirectContext = {
+    recipeId: "oauth2provider";
+    action: "POST_OAUTH2_LOGOUT_REDIRECT";
+    frontendRedirectTo: string;
+};
+export declare type GetRedirectionURLContext =
+    | SuccessRedirectContextOAuth2
+    | ContinueOAuth2AfterRefreshRedirectContext
+    | PostOAuth2LogoutRedirectContext;
+export declare type OnHandleEventContext =
+    | {
+          action: "LOADED_LOGIN_CHALLENGE";
+          loginChallenge: string;
+          loginInfo: LoginInfo;
+          userContext: UserContext;
+      }
+    | {
+          action: "OAUTH2_LOGOUT_SUCCESS";
+          frontendRedirectTo: string;
+          userContext: UserContext;
+      };
+export declare type ComponentOverrideMap = {
+    OAuth2LogoutScreenInner_Override?: ComponentOverride<typeof OAuth2LogoutScreenInner>;
+};
+export declare type OAuth2LogoutScreenThemeProps = {
+    config: NormalisedConfig;
+    isLoggingOut: boolean;
+    onLogoutClicked: () => void;
+    showSpinner: boolean;
 };
-export declare type ComponentOverrideMap = any;
diff --git a/lib/ts/components/assets/logoutIcon.tsx b/lib/ts/components/assets/logoutIcon.tsx
new file mode 100644
index 000000000..d10c86f17
--- /dev/null
+++ b/lib/ts/components/assets/logoutIcon.tsx
@@ -0,0 +1,27 @@
+/* Copyright (c) 2024, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+export default function LogoutIcon(): JSX.Element {
+    return (
+        <svg data-supertokens="logoutIcon" xmlns="http://www.w3.org/2000/svg" width="40" height="38" fill="none">
+            <path
+                fill="rgb(var(--palette-textGray))"
+                fill-rule="evenodd"
+                d="M2.972.022a.874.874 0 0 1-.23.062c-.234.042-.926.362-1.148.53a4.638 4.638 0 0 0-.656.63c-.178.228-.415.681-.495.948l-.116.378C.272 2.742.27 32.075.326 32.251l.111.37c.165.559.636 1.207 1.133 1.558a3.9 3.9 0 0 1 .195.145c.048.046.368.206.588.292l.196.08c.036.016.183.063.326.105.144.042.295.093.337.113.041.02.11.037.154.037s.098.015.12.034c.023.019.218.087.434.15.215.065.43.133.478.153.048.019.254.085.457.146.204.06.404.128.446.148.041.021.11.038.154.038s.098.015.12.034c.023.02.16.069.303.11.144.041.295.092.337.112.041.02.11.037.154.037s.098.015.12.034c.023.018.218.086.434.15.215.065.43.133.478.152.048.02.254.086.457.148.204.062.404.129.446.148a.45.45 0 0 0 .163.037c.048 0 .088.018.088.041 0 .023.034.043.076.043.042 0 .213.048.38.104.168.057.34.104.381.104.042 0 .076.02.076.042 0 .023.04.042.088.042.048 0 .122.017.163.038.042.02.193.07.337.11.274.076.366.106.544.176.06.024.285.096.5.16.216.064.41.132.433.15a.224.224 0 0 0 .12.035.4.4 0 0 1 .155.04c.042.02.193.07.337.108.144.038.3.084.348.103.178.07.613.125.954.122.365-.004.908-.078.965-.133a.16.16 0 0 1 .096-.031c.08 0 .707-.291.784-.364.032-.03.073-.054.09-.054.053 0 .632-.55.748-.71.195-.27.432-.71.432-.803 0-.04.02-.083.044-.097.024-.014.043-.077.043-.14 0-.063.023-.137.05-.163.034-.033.059-.404.077-1.148l.026-1.1 2.894-.023c2.31-.02 2.939-.037 3.119-.084.123-.033.24-.074.257-.091.018-.017.077-.031.132-.031.054 0 .11-.02.125-.042.015-.023.055-.042.089-.042.19 0 1.14-.54 1.493-.849.456-.398.898-.926 1.095-1.304a.916.916 0 0 1 .088-.147c.02-.018.06-.104.219-.48.02-.047.059-.16.088-.252.029-.091.069-.214.09-.271.125-.356.146-.97.146-4.265 0-3.563-.003-3.626-.205-3.987-.204-.364-.756-.78-1.036-.78-.045 0-.093-.019-.108-.042-.035-.054-.661-.054-.696 0-.015.023-.066.042-.113.042-.256 0-.85.449-1.002.757-.253.514-.256.568-.256 4.24v3.287l-.11.222c-.06.123-.186.306-.28.408-.171.188-.551.41-.7.41-.044 0-.092.02-.107.042-.018.027-.943.042-2.635.042h-2.608l-.011-12.165c-.01-9.665-.023-12.176-.066-12.218a.236.236 0 0 1-.055-.149.426.426 0 0 0-.039-.169 4.357 4.357 0 0 1-.118-.26c-.201-.477-.692-1.057-1.127-1.332a2.216 2.216 0 0 1-.196-.134c-.054-.058-.664-.307-.848-.346-.048-.01 1.66-.021 3.795-.024 2.546-.003 3.89.01 3.908.037.015.023.064.042.11.042.19 0 .646.313.82.561.274.39.267.31.267 3.032 0 2.402.02 2.851.14 3.139.245.59.71.966 1.318 1.068.33.055.642.012.979-.134.242-.105.696-.489.696-.588 0-.03.015-.054.033-.054.042 0 .166-.305.213-.522.058-.272.046-5.251-.015-5.666a4.778 4.778 0 0 0-.27-1.066 9.014 9.014 0 0 0-.397-.773 2.902 2.902 0 0 1-.161-.23 3.223 3.223 0 0 0-.298-.377 7.831 7.831 0 0 1-.23-.25c-.149-.175-.564-.502-.91-.717a5.197 5.197 0 0 0-.38-.224c-.011 0-.133-.05-.271-.11a4.346 4.346 0 0 0-.98-.319C22.442.018 3.025-.029 2.973.022Zm28.17 7.903c-.364.092-.514.172-.764.407-.225.21-.38.445-.487.737-.04.11-.054.77-.055 2.645v2.498h-3.457c-2.258 0-3.467.015-3.485.042-.014.023-.063.042-.107.042-.138 0-.449.18-.655.379-.194.187-.38.497-.474.794-.06.187-.062.653-.004.687.024.015.044.06.044.102 0 .17.198.495.443.724.141.132.285.24.32.24.035 0 .063.02.063.042 0 .023.036.042.08.042.044 0 .094.014.111.03.125.12.504.134 3.78.136l3.34.001.014 2.52c.015 2.39.032 2.79.122 2.79.021 0 .039.038.039.084 0 .046.02.084.043.084.024 0 .044.026.044.058 0 .073.476.527.552.527.032 0 .057.016.057.036 0 .02.108.069.24.109.35.106 1.009.076 1.305-.059.175-.08.895-.75 3.656-3.406 1.89-1.82 3.487-3.373 3.548-3.454.278-.37.388-.944.256-1.342-.15-.456-.165-.47-3.737-3.915-1.915-1.846-3.511-3.356-3.547-3.356-.037 0-.067-.014-.067-.031 0-.074-.636-.261-.87-.256-.06.001-.217.03-.349.063Z"
+                clip-rule="evenodd"
+            />
+        </svg>
+    );
+}
diff --git a/lib/ts/recipe/oauth2provider/components/features/oauth2LogoutScreen/index.tsx b/lib/ts/recipe/oauth2provider/components/features/oauth2LogoutScreen/index.tsx
new file mode 100644
index 000000000..4a18245e2
--- /dev/null
+++ b/lib/ts/recipe/oauth2provider/components/features/oauth2LogoutScreen/index.tsx
@@ -0,0 +1,130 @@
+/* Copyright (c) 2024, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*
+ * Imports.
+ */
+import * as React from "react";
+import { Fragment } from "react";
+
+import { ComponentOverrideContext } from "../../../../../components/componentOverride/componentOverrideContext";
+import FeatureWrapper from "../../../../../components/featureWrapper";
+import SuperTokens from "../../../../../superTokens";
+import UI from "../../../../../ui";
+import { useUserContext } from "../../../../../usercontext";
+import { getQueryParams, useRethrowInRender } from "../../../../../utils";
+import { SessionContext } from "../../../../session";
+import OAuth2Provider from "../../../recipe";
+import { OAuth2LogoutScreenTheme } from "../../themes/oauth2LogoutScreen";
+import { defaultTranslationsOAuth2Provider } from "../../themes/translations";
+
+import type { FeatureBaseProps, UserContext } from "../../../../../types";
+import type Recipe from "../../../recipe";
+import type { ComponentOverrideMap } from "../../../types";
+
+type Prop = FeatureBaseProps<{
+    recipe: Recipe;
+    userContext?: UserContext;
+    useComponentOverrides: () => ComponentOverrideMap;
+}>;
+
+export const OAuth2LogoutScreen: React.FC<Prop> = (props) => {
+    const rethrowInRender = useRethrowInRender();
+    const sessionContext = React.useContext(SessionContext);
+    const [isLoggingOut, setIsLoggingOut] = React.useState(false);
+    const recipeComponentOverrides = props.useComponentOverrides();
+    let userContext = useUserContext();
+    if (props.userContext !== undefined) {
+        userContext = props.userContext;
+    }
+
+    const logoutChallenge = getQueryParams("logoutChallenge") ?? undefined;
+    const navigate = props.navigate ?? UI.getReactRouterDomWithCustomHistory()?.useHistoryCustom();
+
+    const onLogout = React.useCallback(async () => {
+        if (logoutChallenge === undefined) {
+            return;
+        }
+        setIsLoggingOut(true);
+        try {
+            const { frontendRedirectTo } = await OAuth2Provider.getInstanceOrThrow().webJSRecipe.logOut({
+                logoutChallenge,
+                userContext,
+            });
+            await props.recipe.redirect(
+                {
+                    recipeId: "oauth2provider",
+                    action: "POST_OAUTH2_LOGOUT_REDIRECT",
+                    frontendRedirectTo,
+                },
+                navigate,
+                {},
+                userContext
+            );
+        } catch (err: any) {
+            rethrowInRender(err);
+        }
+    }, [logoutChallenge, navigate, props.recipe, userContext, rethrowInRender]);
+
+    React.useEffect(() => {
+        // Redirect to the auth page if there is no logoutChallenge
+        if (logoutChallenge === undefined) {
+            void SuperTokens.getInstanceOrThrow().redirectToAuth({
+                userContext,
+                redirectBack: false,
+            });
+        }
+
+        // Call logOut directly if there is no session
+        if (sessionContext.loading === false && sessionContext.doesSessionExist === false) {
+            void onLogout();
+        }
+    }, [userContext, logoutChallenge, sessionContext, onLogout]);
+
+    const childProps = {
+        config: props.recipe.config,
+        showSpinner: sessionContext.loading || sessionContext.doesSessionExist === false,
+        onLogoutClicked: onLogout,
+        isLoggingOut,
+    };
+
+    if (logoutChallenge === undefined) {
+        return null;
+    }
+
+    return (
+        <ComponentOverrideContext.Provider value={recipeComponentOverrides}>
+            <FeatureWrapper
+                useShadowDom={SuperTokens.getInstanceOrThrow().useShadowDom}
+                defaultStore={defaultTranslationsOAuth2Provider}>
+                <Fragment>
+                    {/* No custom theme, use default. */}
+                    {props.children === undefined && <OAuth2LogoutScreenTheme {...childProps} />}
+                    {/* Otherwise, custom theme is provided, propagate props. */}
+                    {props.children &&
+                        React.Children.map(props.children, (child) => {
+                            if (React.isValidElement(child)) {
+                                return React.cloneElement(child, childProps);
+                            }
+
+                            return child;
+                        })}
+                </Fragment>
+            </FeatureWrapper>
+        </ComponentOverrideContext.Provider>
+    );
+};
+
+export default OAuth2LogoutScreen;
diff --git a/lib/ts/recipe/oauth2provider/components/themes/oauth2LogoutScreen/OAuth2LogoutScreenInner.tsx b/lib/ts/recipe/oauth2provider/components/themes/oauth2LogoutScreen/OAuth2LogoutScreenInner.tsx
new file mode 100644
index 000000000..75244caa2
--- /dev/null
+++ b/lib/ts/recipe/oauth2provider/components/themes/oauth2LogoutScreen/OAuth2LogoutScreenInner.tsx
@@ -0,0 +1,41 @@
+/* Copyright (c) 2024, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+import LogoutIcon from "../../../../../components/assets/logoutIcon";
+import { withOverride } from "../../../../../components/componentOverride/withOverride";
+import { useTranslation } from "../../../../../translation/translationContext";
+import { Button } from "../../../../emailpassword/components/library";
+
+export const OAuth2LogoutScreenInner = withOverride(
+    "OAuth2LogoutScreenInner",
+    function OAuth2LogoutScreenInner(props: { isLoggingOut: boolean; onLogoutClicked: () => void }): JSX.Element {
+        const t = useTranslation();
+        return (
+            <>
+                <LogoutIcon />
+                <div data-supertokens="headerTitle">{t("LOGGING_OUT")}</div>
+                <div data-supertokens="headerSubtitle">{t("LOGOUT_CONFIRMATION")}</div>
+                <div data-supertokens="divider" />
+                <Button
+                    disabled={props.isLoggingOut}
+                    isLoading={props.isLoggingOut}
+                    type="button"
+                    label={t("LOGOUT")}
+                    onClick={props.onLogoutClicked}
+                />
+            </>
+        );
+    }
+);
diff --git a/lib/ts/recipe/oauth2provider/components/themes/oauth2LogoutScreen/index.tsx b/lib/ts/recipe/oauth2provider/components/themes/oauth2LogoutScreen/index.tsx
new file mode 100644
index 000000000..76c9d556a
--- /dev/null
+++ b/lib/ts/recipe/oauth2provider/components/themes/oauth2LogoutScreen/index.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable react/jsx-no-literals */
+import React from "react";
+
+import { SuperTokensBranding } from "../../../../../components/SuperTokensBranding";
+import SuperTokens from "../../../../../superTokens";
+import DynamicLoginMethodsSpinner from "../../../../multitenancy/components/features/dynamicLoginMethodsSpinner";
+import { ThemeBase } from "../themeBase";
+
+import { OAuth2LogoutScreenInner } from "./OAuth2LogoutScreenInner";
+
+import type { OAuth2LogoutScreenThemeProps } from "../../../types";
+import type { FC } from "react";
+
+const OAuth2LogoutScreen: FC<OAuth2LogoutScreenThemeProps> = (props) => {
+    if (props.showSpinner) {
+        return <DynamicLoginMethodsSpinner />;
+    }
+    return (
+        <div data-supertokens="oauth2Logout container">
+            <div data-supertokens="row">
+                <OAuth2LogoutScreenInner isLoggingOut={props.isLoggingOut} onLogoutClicked={props.onLogoutClicked} />
+            </div>
+            <SuperTokensBranding />
+        </div>
+    );
+};
+
+export const OAuth2LogoutScreenTheme: React.FC<OAuth2LogoutScreenThemeProps> = (props) => {
+    const rootStyle = SuperTokens.getInstanceOrThrow().rootStyle;
+
+    return (
+        <ThemeBase userStyles={[rootStyle, props.config.recipeRootStyle, props.config.oauth2LogoutScreen.style]}>
+            <OAuth2LogoutScreen {...props} />
+        </ThemeBase>
+    );
+};
diff --git a/lib/ts/recipe/oauth2provider/components/themes/styles.css b/lib/ts/recipe/oauth2provider/components/themes/styles.css
new file mode 100644
index 000000000..b26535209
--- /dev/null
+++ b/lib/ts/recipe/oauth2provider/components/themes/styles.css
@@ -0,0 +1,31 @@
+/* Copyright (c) 2024, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+@import "../../../../styles/styles.css";
+
+[data-supertokens~="logoutIcon"] {
+    padding: 18px 20px 18px 24px;
+    background-color: rgba(var(--palette-textGray), 0.1);
+    border-radius: 12px;
+}
+
+[data-supertokens~="oauth2Logout"] [data-supertokens~="headerTitle"] {
+    margin-top: 24px;
+    margin-bottom: 24px;
+}
+
+[data-supertokens~="oauth2Logout"] [data-supertokens~="button"] {
+    margin-bottom: 24px;
+}
diff --git a/lib/ts/recipe/oauth2provider/components/themes/themeBase.tsx b/lib/ts/recipe/oauth2provider/components/themes/themeBase.tsx
new file mode 100644
index 000000000..883671522
--- /dev/null
+++ b/lib/ts/recipe/oauth2provider/components/themes/themeBase.tsx
@@ -0,0 +1,36 @@
+/* Copyright (c) 2024, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from "react";
+import { Fragment } from "react";
+
+import styles from "./styles.css";
+
+import type { PropsWithChildren } from "react";
+
+export const ThemeBase: React.FC<PropsWithChildren<{ userStyles: Array<string | undefined> }>> = ({
+    children,
+    userStyles,
+}) => {
+    return (
+        <Fragment>
+            {children}
+            <style>
+                {styles}
+                {userStyles.join("\n")}
+            </style>
+        </Fragment>
+    );
+};
diff --git a/lib/ts/recipe/oauth2provider/components/themes/translations.ts b/lib/ts/recipe/oauth2provider/components/themes/translations.ts
index 46e47ec58..92edb895e 100644
--- a/lib/ts/recipe/oauth2provider/components/themes/translations.ts
+++ b/lib/ts/recipe/oauth2provider/components/themes/translations.ts
@@ -1,3 +1,10 @@
+import { defaultTranslationsCommon } from "../../../../translation/translations";
+
 export const defaultTranslationsOAuth2Provider = {
-    en: {},
+    en: {
+        ...defaultTranslationsCommon.en,
+        LOGGING_OUT: "Logging Out",
+        LOGOUT_CONFIRMATION: "Are you sure you want to log out?",
+        LOGOUT: "LOG OUT",
+    },
 };
diff --git a/lib/ts/recipe/oauth2provider/constants.ts b/lib/ts/recipe/oauth2provider/constants.ts
index 13c4c4e90..3ac81a72d 100644
--- a/lib/ts/recipe/oauth2provider/constants.ts
+++ b/lib/ts/recipe/oauth2provider/constants.ts
@@ -13,3 +13,4 @@
  * under the License.
  */
 export const DEFAULT_TRY_REFRESH_PATH = "/try-refresh";
+export const DEFAULT_OAUTH2_LOGOUT_PATH = "/oauth/logout";
diff --git a/lib/ts/recipe/oauth2provider/functionOverrides.ts b/lib/ts/recipe/oauth2provider/functionOverrides.ts
index 7e0fc33d5..e1df04bd8 100644
--- a/lib/ts/recipe/oauth2provider/functionOverrides.ts
+++ b/lib/ts/recipe/oauth2provider/functionOverrides.ts
@@ -16,4 +16,13 @@ export const getFunctionOverrides =
             });
             return response;
         },
+        async logOut(input) {
+            const response = await originalImp.logOut(input);
+            onHandleEvent({
+                action: "OAUTH2_LOGOUT_SUCCESS",
+                frontendRedirectTo: response.frontendRedirectTo,
+                userContext: input.userContext,
+            });
+            return response;
+        },
     });
diff --git a/lib/ts/recipe/oauth2provider/index.ts b/lib/ts/recipe/oauth2provider/index.ts
index 43f9a1146..c9ceb085f 100644
--- a/lib/ts/recipe/oauth2provider/index.ts
+++ b/lib/ts/recipe/oauth2provider/index.ts
@@ -49,15 +49,38 @@ export default class Wrapper {
         return OAuth2Provider.getInstanceOrThrow().webJSRecipe.getLoginChallengeInfo(input);
     }
 
+    /**
+     * Accepts the OAuth2 Logout request, clears the SuperTokens session and returns post logout redirect URL.
+     *
+     * @param logoutChallenge The logout challenge from the url
+     *
+     * @param userContext (OPTIONAL) Refer to {@link https://supertokens.com/docs/emailpassword/advanced-customizations/user-context the documentation}
+     *
+     * @param options (OPTIONAL) Use this to configure additional properties (for example pre api hooks)
+     *
+     * @returns `{status: "OK", frontendRedirectTo: string}`
+     *
+     * @throws STGeneralError if the API exposed by the backend SDKs returns `status: "GENERAL_ERROR"`
+     */
+    static logOut(input: { logoutChallenge: string; options?: RecipeFunctionOptions; userContext?: any }): Promise<{
+        status: "OK";
+        frontendRedirectTo: string;
+        fetchResponse: Response;
+    }> {
+        return OAuth2Provider.getInstanceOrThrow().webJSRecipe.logOut(input);
+    }
+
     static ComponentsOverrideProvider = RecipeComponentsOverrideContextProvider;
 }
 
 const init = Wrapper.init;
 const getLoginChallengeInfo = Wrapper.getLoginChallengeInfo;
+const logOut = Wrapper.logOut;
 
 export {
     init,
     getLoginChallengeInfo,
+    logOut,
     GetRedirectionURLContext,
     PreAPIHookContext,
     OnHandleEventContext,
diff --git a/lib/ts/recipe/oauth2provider/prebuiltui.tsx b/lib/ts/recipe/oauth2provider/prebuiltui.tsx
index 0e3c511a3..456acb604 100644
--- a/lib/ts/recipe/oauth2provider/prebuiltui.tsx
+++ b/lib/ts/recipe/oauth2provider/prebuiltui.tsx
@@ -6,9 +6,10 @@ import { RecipeRouter } from "../recipeRouter";
 import { SessionAuth } from "../session";
 
 import { useRecipeComponentOverrideContext } from "./componentOverrideContext";
+import { default as OAuth2LogoutScreen } from "./components/features/oauth2LogoutScreen";
 import { default as TryRefreshPageFeature } from "./components/features/tryRefreshPage";
 import { defaultTranslationsOAuth2Provider } from "./components/themes/translations";
-import { DEFAULT_TRY_REFRESH_PATH } from "./constants";
+import { DEFAULT_TRY_REFRESH_PATH, DEFAULT_OAUTH2_LOGOUT_PATH } from "./constants";
 import OAuth2ProviderRecipe from "./recipe";
 
 import type { GenericComponentOverrideMap } from "../../components/componentOverride/componentOverrideContext";
@@ -38,7 +39,7 @@ export class OAuth2ProviderPreBuiltUI extends RecipeRouter {
         return OAuth2ProviderPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatures(useComponentOverrides);
     }
     static getFeatureComponent(
-        componentName: "try-refresh-page",
+        componentName: "try-refresh-page" | "oauth2-logout-screen",
         props: any,
         useComponentOverrides: () => GenericComponentOverrideMap<any> = useRecipeComponentOverrideContext
     ): JSX.Element {
@@ -64,25 +65,51 @@ export class OAuth2ProviderPreBuiltUI extends RecipeRouter {
                 recipeID: OAuth2ProviderRecipe.RECIPE_ID,
             };
         }
+        if (this.recipeInstance.config.oauth2LogoutScreen.disableDefaultUI !== true) {
+            const normalisedFullPath = this.recipeInstance.config.appInfo.websiteBasePath.appendPath(
+                new NormalisedURLPath(DEFAULT_OAUTH2_LOGOUT_PATH)
+            );
+            features[normalisedFullPath.getAsStringDangerous()] = {
+                matches: matchRecipeIdUsingQueryParams(this.recipeInstance.config.recipeId),
+                component: (props) =>
+                    this.getFeatureComponent("oauth2-logout-screen", props as any, useComponentOverrides),
+                recipeID: OAuth2ProviderRecipe.RECIPE_ID,
+            };
+        }
         return features;
     };
     getFeatureComponent = (
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        _: "try-refresh-page",
+        componentName: "try-refresh-page" | "oauth2-logout-screen",
         props: FeatureBaseProps<{ userContext?: UserContext }>,
         useComponentOverrides: () => GenericComponentOverrideMap<any> = useRecipeComponentOverrideContext
     ): JSX.Element => {
-        return (
-            <UserContextWrapper userContext={props.userContext}>
-                <SessionAuth requireAuth={false} overrideGlobalClaimValidators={() => []}>
-                    <TryRefreshPageFeature
-                        recipe={this.recipeInstance}
-                        useComponentOverrides={useComponentOverrides}
-                        {...props}
-                    />
-                </SessionAuth>
-            </UserContextWrapper>
-        );
+        if (componentName === "try-refresh-page") {
+            return (
+                <UserContextWrapper userContext={props.userContext}>
+                    <SessionAuth requireAuth={false} overrideGlobalClaimValidators={() => []}>
+                        <TryRefreshPageFeature
+                            recipe={this.recipeInstance}
+                            useComponentOverrides={useComponentOverrides}
+                            {...props}
+                        />
+                    </SessionAuth>
+                </UserContextWrapper>
+            );
+        } else if (componentName === "oauth2-logout-screen") {
+            return (
+                <UserContextWrapper userContext={props.userContext}>
+                    <SessionAuth requireAuth={false} overrideGlobalClaimValidators={() => []}>
+                        <OAuth2LogoutScreen
+                            recipe={this.recipeInstance}
+                            useComponentOverrides={useComponentOverrides}
+                            {...props}
+                        />
+                    </SessionAuth>
+                </UserContextWrapper>
+            );
+        }
+        throw new Error("Should never come here.");
     };
 
     getAuthComponents(): AuthComponent[] {
@@ -101,6 +128,8 @@ export class OAuth2ProviderPreBuiltUI extends RecipeRouter {
 
     static TryRefreshPage = (props: FeatureBaseProps<{ userContext?: UserContext }>) =>
         OAuth2ProviderPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatureComponent("try-refresh-page", props);
+    static OAuth2LogoutScreen = (props: FeatureBaseProps<{ userContext?: UserContext }>) =>
+        OAuth2ProviderPreBuiltUI.getInstanceOrInitAndGetInstance().getFeatureComponent("oauth2-logout-screen", props);
 }
 
 const TryRefreshPage = OAuth2ProviderPreBuiltUI.TryRefreshPage;
diff --git a/lib/ts/recipe/oauth2provider/recipe.ts b/lib/ts/recipe/oauth2provider/recipe.ts
index 9018d4413..b1831450c 100644
--- a/lib/ts/recipe/oauth2provider/recipe.ts
+++ b/lib/ts/recipe/oauth2provider/recipe.ts
@@ -116,6 +116,8 @@ export default class OAuth2Provider extends RecipeModule<
             const basePath = this.config.appInfo.apiBasePath.getAsStringDangerous();
 
             return `${domain}${basePath}/oauth/login?loginChallenge=${ctx.loginChallenge}`;
+        } else if (ctx.action === "POST_OAUTH2_LOGOUT_REDIRECT") {
+            return ctx.frontendRedirectTo;
         } else {
             throw new Error("Should never come here: unknown action in OAuth2Provider.getDefaultRedirectionURL");
         }
diff --git a/lib/ts/recipe/oauth2provider/types.ts b/lib/ts/recipe/oauth2provider/types.ts
index 36511eb27..6eca2e65b 100644
--- a/lib/ts/recipe/oauth2provider/types.ts
+++ b/lib/ts/recipe/oauth2provider/types.ts
@@ -1,4 +1,6 @@
-import type { SuccessRedirectContextOAuth2, UserContext } from "../../types";
+import type { OAuth2LogoutScreenInner } from "./components/themes/oauth2LogoutScreen/OAuth2LogoutScreenInner";
+import type { ComponentOverride } from "../../components/componentOverride/componentOverride";
+import type { NormalisedBaseConfig, SuccessRedirectContextOAuth2, UserContext } from "../../types";
 import type {
     UserInput as RecipeModuleUserInput,
     NormalisedConfig as NormalisedRecipeModuleConfig,
@@ -6,7 +8,7 @@ import type {
 import type OverrideableBuilder from "supertokens-js-override";
 import type { LoginInfo, RecipeInterface } from "supertokens-web-js/recipe/oauth2provider/types";
 
-export type PreAndPostAPIHookAction = "GET_LOGIN_CHALLENGE_INFO";
+export type PreAndPostAPIHookAction = "GET_LOGIN_CHALLENGE_INFO" | "LOG_OUT";
 
 export type PreAPIHookContext = {
     action: PreAndPostAPIHookAction;
@@ -17,6 +19,7 @@ export type PreAPIHookContext = {
 
 export type UserInput = {
     disableDefaultUI?: boolean;
+    oauth2LogoutScreen?: Partial<OAuth2LogoutScreenConfig>;
     override?: {
         functions?: (
             originalImplementation: RecipeInterface,
@@ -31,6 +34,7 @@ export type NormalisedConfig = NormalisedRecipeModuleConfig<
     OnHandleEventContext
 > & {
     disableDefaultUI: boolean;
+    oauth2LogoutScreen: OAuth2LogoutScreenConfig;
     override: {
         functions: (
             originalImplementation: RecipeInterface,
@@ -39,23 +43,50 @@ export type NormalisedConfig = NormalisedRecipeModuleConfig<
     };
 };
 
+export type OAuth2LogoutScreenConfig = NormalisedBaseConfig & {
+    disableDefaultUI: boolean;
+};
+
 export type ContinueOAuth2AfterRefreshRedirectContext = {
     recipeId: "oauth2provider";
     action: "CONTINUE_OAUTH2_AFTER_REFRESH";
     loginChallenge: string;
 };
 
-export type GetRedirectionURLContext = SuccessRedirectContextOAuth2 | ContinueOAuth2AfterRefreshRedirectContext;
+export type PostOAuth2LogoutRedirectContext = {
+    recipeId: "oauth2provider";
+    action: "POST_OAUTH2_LOGOUT_REDIRECT";
+    frontendRedirectTo: string;
+};
+
+export type GetRedirectionURLContext =
+    | SuccessRedirectContextOAuth2
+    | ContinueOAuth2AfterRefreshRedirectContext
+    | PostOAuth2LogoutRedirectContext;
 
-export type OnHandleEventContext = {
-    /*
-     * On Handle Event actions
-     */
-    action: "LOADED_LOGIN_CHALLENGE";
-    loginChallenge: string;
-    loginInfo: LoginInfo;
-    userContext: UserContext;
+export type OnHandleEventContext =
+    | {
+          /*
+           * On Handle Event actions
+           */
+          action: "LOADED_LOGIN_CHALLENGE";
+          loginChallenge: string;
+          loginInfo: LoginInfo;
+          userContext: UserContext;
+      }
+    | {
+          action: "OAUTH2_LOGOUT_SUCCESS";
+          frontendRedirectTo: string;
+          userContext: UserContext;
+      };
+
+export type ComponentOverrideMap = {
+    OAuth2LogoutScreenInner_Override?: ComponentOverride<typeof OAuth2LogoutScreenInner>;
 };
 
-// TODO: update this whenever we add components
-export type ComponentOverrideMap = any;
+export type OAuth2LogoutScreenThemeProps = {
+    config: NormalisedConfig;
+    isLoggingOut: boolean;
+    onLogoutClicked: () => void;
+    showSpinner: boolean;
+};
diff --git a/lib/ts/recipe/oauth2provider/utils.ts b/lib/ts/recipe/oauth2provider/utils.ts
index 8402f7ba8..00ed6c7df 100644
--- a/lib/ts/recipe/oauth2provider/utils.ts
+++ b/lib/ts/recipe/oauth2provider/utils.ts
@@ -6,6 +6,11 @@ export function normaliseOAuth2Config(config?: UserInput): NormalisedConfig {
     return {
         ...normaliseRecipeModuleConfig(config),
         disableDefaultUI: config?.disableDefaultUI ?? false,
+        oauth2LogoutScreen: {
+            disableDefaultUI: false,
+            style: "",
+            ...config?.oauth2LogoutScreen,
+        },
         override: {
             functions: (originalImplementation) => originalImplementation,
             ...config?.override,
diff --git a/stories/oauth2provider.stories.tsx b/stories/oauth2provider.stories.tsx
new file mode 100644
index 000000000..68c839ad3
--- /dev/null
+++ b/stories/oauth2provider.stories.tsx
@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { OAuth2LogoutScreenTheme as Page } from "../lib/ts/recipe/oauth2provider/components/themes/oauth2LogoutScreen";
+import React from "react";
+import { defaultTranslationsOAuth2Provider } from "../lib/ts/recipe/oauth2provider/components/themes/translations";
+import { WindowHandlerReference } from "supertokens-web-js/utils/windowHandler";
+import { TranslationContextProvider } from "../lib/ts/translation/translationContext";
+import { ComponentOverrideContext } from "../lib/ts/components/componentOverride/componentOverrideContext";
+import { resetAndInitST } from "./utils";
+import { SessionContext } from "../lib/ts/recipe/session";
+
+function noop() {}
+WindowHandlerReference.init((oI) => ({ ...oI }));
+
+const defaultSessionContext = {
+    loading: false,
+    doesSessionExist: true,
+    invalidClaims: [],
+    accessTokenPayload: {},
+    userId: "test-user",
+};
+
+const meta: Meta<typeof Page> = {
+    title: "OAuth2Provider",
+    decorators: [
+        (Story, context) => {
+            return (
+                <SessionContext.Provider value={context.loaded.session ?? defaultSessionContext}>
+                    <ComponentOverrideContext.Provider value={{}}>
+                        <TranslationContextProvider
+                            translationControlEventSource={{ on: noop, off: noop }}
+                            defaultLanguage="en"
+                            defaultStore={defaultTranslationsOAuth2Provider}>
+                            <Story />
+                        </TranslationContextProvider>
+                    </ComponentOverrideContext.Provider>
+                </SessionContext.Provider>
+            );
+        },
+    ],
+    component: Page,
+    render: (args, ctx) => {
+        resetAndInitST();
+        return <Page {...args} />;
+    },
+    argTypes: {
+        config: { table: { disable: true } },
+    },
+    args: {
+        showSpinner: false,
+        isLoggingOut: false,
+        config: {
+            oauth2LogoutScreen: { style: "" },
+        } as any, // We don't use any config values
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof Page>;
+
+export const OAuth2LogoutScreen: Story = {
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/FlU5eMznAw68y5XU3pRVyZ/Homepage-and-pricing-page?node-id=5018-33&t=u8hfT9V6cJ7b7qEL-0",
+        },
+    },
+    args: {},
+};
+
+export const OAuth2LogoutScreenSpinner: Story = {
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/FlU5eMznAw68y5XU3pRVyZ/Homepage-and-pricing-page?node-id=5018-33&t=u8hfT9V6cJ7b7qEL-0",
+        },
+    },
+    args: {
+        showSpinner: true,
+    },
+};
diff --git a/test/end-to-end/oauth2provider.test.js b/test/end-to-end/oauth2provider.test.js
index 2c3585b94..64a887e21 100644
--- a/test/end-to-end/oauth2provider.test.js
+++ b/test/end-to-end/oauth2provider.test.js
@@ -37,6 +37,7 @@ import {
     getDefaultSignUpFieldValues,
     getTestEmail,
     getOAuth2Error,
+    waitForSTElement,
 } from "../helpers";
 import fetch from "isomorphic-fetch";
 
@@ -167,6 +168,68 @@ describe("SuperTokens OAuth2Provider", function () {
             await waitForUrl(page, "/oauth/callback");
         });
 
+        it("should successfully complete the OAuth2 Logout flow", async function () {
+            const postLogoutRedirectUri = `${TEST_CLIENT_BASE_URL}/oauth/login?logout=true`;
+
+            const { client } = await createOAuth2Client({
+                scope: "offline_access profile openid email",
+                redirectUris: [`${TEST_CLIENT_BASE_URL}/oauth/callback`],
+                postLogoutRedirectUris: [postLogoutRedirectUri],
+                accessTokenStrategy: "jwt",
+                tokenEndpointAuthMethod: "none",
+                grantTypes: ["authorization_code", "refresh_token"],
+                responseTypes: ["code", "id_token"],
+                skipConsent: true,
+            });
+
+            await setOAuth2ClientInfo(
+                page,
+                client.clientId,
+                undefined,
+                undefined,
+                undefined,
+                JSON.stringify({
+                    post_logout_redirect_uri: postLogoutRedirectUri,
+                })
+            );
+
+            await Promise.all([
+                page.waitForNavigation({ waitUntil: "networkidle0" }),
+                page.goto(`${TEST_CLIENT_BASE_URL}/oauth/login`),
+            ]);
+
+            let loginButton = await getOAuth2LoginButton(page);
+            await loginButton.click();
+
+            await waitForUrl(page, "/auth");
+
+            await toggleSignInSignUp(page);
+            const { fieldValues, postValues } = getDefaultSignUpFieldValues({ email: getTestEmail() });
+            await signUp(page, fieldValues, postValues, "emailpassword");
+
+            await waitForUrl(page, "/oauth/callback");
+
+            // Logout
+            const logoutButton = await getOAuth2LogoutButton(page, "redirect");
+            await logoutButton.click();
+
+            await waitForUrl(page, "/auth/oauth/logout");
+
+            // Click the Logout button on the provider website
+            const stLogoutButton = await waitForSTElement(page, "[data-supertokens~=button]");
+            await stLogoutButton.click();
+
+            // Ensure the final url matches the post_logout_redirect uri
+            await waitForUrl(page, "/oauth/login?logout=true", false);
+
+            await page.waitForSelector("#oauth2-token-data", { hidden: true });
+
+            // Ensure that the SuperTokens session was cleared by checking for a redirect to the provider's auth page during the login flow.
+            loginButton = await getOAuth2LoginButton(page);
+            await loginButton.click();
+            await waitForUrl(page, "/auth");
+        });
+
         it("should login without interaction if the user already has a session", async function () {
             const { client } = await createOAuth2Client({
                 scope: "offline_access profile openid email",
diff --git a/test/helpers.js b/test/helpers.js
index 672718e9b..f45eacf34 100644
--- a/test/helpers.js
+++ b/test/helpers.js
@@ -1142,6 +1142,9 @@ export async function setOAuth2ClientInfo(page, clientId, scopes, extraConfig, e
 export async function removeOAuth2ClientInfo(page) {
     await page.evaluate(() => localStorage.removeItem("oauth2-client-id"));
     await page.evaluate(() => localStorage.removeItem("oauth2-scopes"));
+    await page.evaluate(() => localStorage.removeItem("oauth2-extra-config"));
+    await page.evaluate(() => localStorage.removeItem("oauth2-extra-sign-in-params"));
+    await page.evaluate(() => localStorage.removeItem("oauth2-extra-sign-out-params"));
 }
 
 export async function getOAuth2LoginButton(page, type = "default") {
@@ -1154,8 +1157,9 @@ export async function getOAuth2Error(page) {
     return await ele.evaluate((el) => el.textContent);
 }
 
-export async function getOAuth2LogoutButton(page) {
-    return page.waitForSelector("#oauth2-logout-button");
+export async function getOAuth2LogoutButton(page, type = "silent") {
+    const id = type === "silent" ? "#oauth2-logout-button" : `#oauth2-logout-button-${type}`;
+    return page.waitForSelector(id);
 }
 
 export async function getOAuth2TokenData(page) {
diff --git a/test/unit/componentOverrides.test.tsx b/test/unit/componentOverrides.test.tsx
index b83c106bf..b3025c76d 100644
--- a/test/unit/componentOverrides.test.tsx
+++ b/test/unit/componentOverrides.test.tsx
@@ -10,6 +10,7 @@ import { ComponentOverrideMap as PasswordlessOverrideMap } from "../../lib/ts/re
 import { ComponentOverrideMap as TOTPOverrideMap } from "../../lib/ts/recipe/totp/types";
 import { ComponentOverrideMap as MFAOverrideMap } from "../../lib/ts/recipe/multifactorauth/types";
 import { ComponentOverrideMap as AuthRecipeOverrideMap } from "../../lib/ts/recipe/authRecipe/types";
+import { ComponentOverrideMap as OAuth2ProviderOverrideMap } from "../../lib/ts/recipe/oauth2provider/types";
 
 import "@testing-library/jest-dom";
 import EmailPassword from "../../lib/ts/recipe/emailpassword/recipe";
@@ -56,6 +57,7 @@ import { FactorChooserHeader } from "../../lib/ts/recipe/multifactorauth/compone
 import { FactorList } from "../../lib/ts/recipe/multifactorauth/components/themes/factorChooser/factorList";
 import { FactorOption } from "../../lib/ts/recipe/multifactorauth/components/themes/factorChooser/factorOption";
 import { AuthPageComponentList, AuthPageFooter, AuthPageHeader } from "../../lib/ts/ui";
+import { OAuth2LogoutScreenInner } from "../../lib/ts/recipe/oauth2provider/components/themes/oauth2LogoutScreen/OAuth2LogoutScreenInner";
 
 type AllComponentsOverrideMap = AuthRecipeOverrideMap &
     EmailPasswordOverrideMap &
@@ -63,7 +65,8 @@ type AllComponentsOverrideMap = AuthRecipeOverrideMap &
     EmailVerificationOverrideMap &
     PasswordlessOverrideMap &
     TOTPOverrideMap &
-    MFAOverrideMap;
+    MFAOverrideMap &
+    OAuth2ProviderOverrideMap;
 
 const makeOverride = () => () => <h1 data-testid="override">Override</h1>;
 const WithProvider: React.FC<any> = ({ overrideMap, children }) => {
@@ -131,6 +134,7 @@ describe("Theme component overrides", () => {
         AuthPageComponentList_Override: AuthPageComponentList,
         AuthPageFooter_Override: AuthPageFooter,
         AuthPageHeader_Override: AuthPageHeader,
+        OAuth2LogoutScreenInner_Override: OAuth2LogoutScreenInner,
     };
 
     Object.entries(overrides).forEach(([key, comp]) => {
@@ -157,6 +161,7 @@ describe("Theme component overrides", () => {
                                   },
                                   verifyEmailLinkClickedScreen: { style: `` },
                                   sendVerifyEmailScreen: { style: `` },
+                                  oauth2LogoutScreen: { style: `` },
                               },
                           },
                       ];