fix: PR changes

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)}>

lib/ts/recipe/oauth2provider/components/features/oauth2LogoutScreen/index.tsx

@@ -26,6 +26,7 @@ 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";
 
@@ -57,9 +58,12 @@ export const OAuth2LogoutScreen: React.FC<Prop> = (props) => {
             return;
         }
         setIsLoggingOut(true);
-        const { frontendRedirectTo } = await props.recipe.logOut(logoutChallenge, userContext);
-        await props.recipe
-            .redirect(
+        try {
+            const { frontendRedirectTo } = await OAuth2Provider.getInstanceOrThrow().webJSRecipe.logOut({
+                logoutChallenge,
+                userContext,
+            });
+            await props.recipe.redirect(
                 {
                     recipeId: "oauth2provider",
                     action: "POST_OAUTH2_LOGOUT_REDIRECT",
@@ -68,8 +72,10 @@ export const OAuth2LogoutScreen: React.FC<Prop> = (props) => {
                 navigate,
                 {},
                 userContext
-            )
-            .catch(rethrowInRender);
+            );
+        } catch (err: any) {
+            rethrowInRender(err);
+        }
     }, [logoutChallenge, navigate, props.recipe, userContext, rethrowInRender]);
 
     React.useEffect(() => {

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}
+                />
+            </>
+        );
+    }
+);

lib/ts/recipe/oauth2provider/components/themes/oauth2LogoutScreen/index.tsx

@@ -1,60 +1,36 @@
 /* eslint-disable react/jsx-no-literals */
 import React from "react";
 
-import LogoutIcon from "../../../../../components/assets/logoutIcon";
-import { withOverride } from "../../../../../components/componentOverride/withOverride";
 import { SuperTokensBranding } from "../../../../../components/SuperTokensBranding";
-import { hasFontDefined } from "../../../../../styles/styles";
 import SuperTokens from "../../../../../superTokens";
-import { useTranslation } from "../../../../../translation/translationContext";
-import { Button } from "../../../../emailpassword/components/library";
 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) => {
-    const t = useTranslation();
-
     if (props.showSpinner) {
         return <DynamicLoginMethodsSpinner />;
     }
-
     return (
-        <div data-supertokens="oauth2Logout">
-            <div data-supertokens="container">
-                <div data-supertokens="row">
-                    <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}
-                    />
-                    <SuperTokensBranding />
-                </div>
+        <div data-supertokens="oauth2Logout container">
+            <div data-supertokens="row">
+                <OAuth2LogoutScreenInner isLoggingOut={props.isLoggingOut} onLogoutClicked={props.onLogoutClicked} />
             </div>
+            <SuperTokensBranding />
         </div>
     );
 };
 
-const OAuth2LogoutThemeWithOverride = withOverride("OAuth2LogoutScreen", OAuth2LogoutScreen);
-
 export const OAuth2LogoutScreenTheme: React.FC<OAuth2LogoutScreenThemeProps> = (props) => {
     const rootStyle = SuperTokens.getInstanceOrThrow().rootStyle;
-    const hasFont = hasFontDefined(rootStyle) || hasFontDefined(props.config.recipeRootStyle);
 
     return (
-        <ThemeBase
-            loadDefaultFont={!hasFont}
-            userStyles={[rootStyle, props.config.recipeRootStyle, props.config.oauth2LogoutScreen.style]}>
-            <OAuth2LogoutThemeWithOverride {...props} />
+        <ThemeBase userStyles={[rootStyle, props.config.recipeRootStyle, props.config.oauth2LogoutScreen.style]}>
+            <OAuth2LogoutScreen {...props} />
         </ThemeBase>
     );
 };