test: Add e2e test for OAuth2 (#843)

* test: Add e2e test for OAuth2

* fix: PR changes

* feat: add tryLinkingWithSessionUser, forceFreshAuth and small test fixes

* test: add explanation comment to oauth2 tests

---------

Co-authored-by: Mihaly Lengyel <[email protected]>

examples/for-tests/package.json

@@ -4,8 +4,10 @@
     "private": true,
     "dependencies": {
         "axios": "^0.21.0",
+        "oidc-client-ts": "^3.0.1",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
+        "react-oidc-context": "^3.1.0",
         "react-router-dom": "6.11.2",
         "react-scripts": "^5.0.1"
     },

examples/for-tests/src/App.js

@@ -14,6 +14,7 @@ import Multitenancy from "supertokens-auth-react/recipe/multitenancy";
 import UserRoles from "supertokens-auth-react/recipe/userroles";
 import MultiFactorAuth from "supertokens-auth-react/recipe/multifactorauth";
 import TOTP from "supertokens-auth-react/recipe/totp";
+import OAuth2Provider from "supertokens-auth-react/recipe/oauth2provider";
 
 import axios from "axios";
 import { useSessionContext } from "supertokens-auth-react/recipe/session";
@@ -27,6 +28,7 @@ import { logWithPrefix } from "./logWithPrefix";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { useNavigate } from "react-router-dom";
 import { getTestContext, getEnabledRecipes, getQueryParams } from "./testContext";
+import { getApiDomain, getWebsiteDomain } from "./config";
 
 const loadv5RRD = window.localStorage.getItem("react-router-dom-is-v5") === "true";
 if (loadv5RRD) {
@@ -43,18 +45,6 @@ const withRouter = function (Child) {
 
 Session.addAxiosInterceptors(axios);
 
-export function getApiDomain() {
-    const apiPort = process.env.REACT_APP_API_PORT || 8082;
-    const apiUrl = process.env.REACT_APP_API_URL || `http://localhost:${apiPort}`;
-    return apiUrl;
-}
-
-export function getWebsiteDomain() {
-    const websitePort = process.env.REACT_APP_WEBSITE_PORT || 3031;
-    const websiteUrl = process.env.REACT_APP_WEBSITE_URL || `http://localhost:${websitePort}`;
-    return getQueryParams("websiteDomain") ?? websiteUrl;
-}
-
 /*
  * Use localStorage for tests configurations.
  */
@@ -419,6 +409,7 @@ let recipeList = [
             console.log(`ST_LOGS SESSION ON_HANDLE_EVENT ${ctx.action}`);
         },
     }),
+    OAuth2Provider.init(),
 ];
 
 let enabledRecipes = getEnabledRecipes();
@@ -801,7 +792,6 @@ function getSignInFormFields(formType) {
                     id: "test",
                 },
             ];
-            return;
     }
 }
 

examples/for-tests/src/AppWithReactDomRouter.js

@@ -12,6 +12,7 @@ import { MultiFactorAuthPreBuiltUI } from "supertokens-auth-react/recipe/multifa
 import { TOTPPreBuiltUI } from "supertokens-auth-react/recipe/totp/prebuiltui";
 import { BaseComponent, Home, Contact, Dashboard, DashboardNoAuthRequired } from "./App";
 import { getEnabledRecipes, getTestContext } from "./testContext";
+import OAuth2Page from "./OAuth2Page";
 
 function AppWithReactDomRouter(props) {
     /**
@@ -172,6 +173,9 @@ function AppWithReactDomRouter(props) {
                                 }
                             />
                         )}
+
+                        <Route path="/oauth2/login" element={<OAuth2Page />} />
+                        <Route path="/oauth2/callback" element={<OAuth2Page />} />
                     </Routes>
                 </BaseComponent>
             </Router>

examples/for-tests/src/OAuth2Page.js

@@ -0,0 +1,52 @@
+import { AuthProvider, useAuth } from "react-oidc-context";
+import { getApiDomain, getWebsiteDomain } from "./config";
+
+// NOTE: For convenience, the same page/component handles both login initiation and callback.
+// Separate pages for login and callback are not required.
+
+const oidcConfig = {
+    client_id: window.localStorage.getItem("oauth2-client-id"),
+    authority: `${getApiDomain()}/auth`,
+    response_type: "code",
+    redirect_uri: `${getWebsiteDomain()}/oauth2/callback`,
+    scope: "profile openid offline_access email",
+    onSigninCallback: async (user) => {
+        // Clears the response code and other params from the callback url
+        window.history.replaceState({}, document.title, window.location.pathname);
+    },
+};
+
+function AuthPage() {
+    const { signinRedirect, signoutSilent, user, error } = useAuth();
+
+    return (
+        <div>
+            <h1 style={{ textAlign: "center" }}>OAuth2 Login Test</h1>
+            <div>
+                {user ? (
+                    <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+                        <pre id="oauth2-token-data">{JSON.stringify(user.profile, null, 2)}</pre>
+                        <button id="oauth2-logout-button" onClick={() => signoutSilent()}>
+                            Logout
+                        </button>
+                    </div>
+                ) : (
+                    <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+                        {error && <p id="oauth2-error-message">Error: {error.message}</p>}
+                        <button id="oauth2-login-button" onClick={() => signinRedirect()}>
+                            Login With SuperTokens
+                        </button>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default function OAuth2Page() {
+    return (
+        <AuthProvider {...oidcConfig}>
+            <AuthPage />
+        </AuthProvider>
+    );
+}

examples/for-tests/src/config.js

@@ -0,0 +1,13 @@
+import { getQueryParams } from "./testContext";
+
+export function getApiDomain() {
+    const apiPort = process.env.REACT_APP_API_PORT || 8082;
+    const apiUrl = process.env.REACT_APP_API_URL || `http://localhost:${apiPort}`;
+    return apiUrl;
+}
+
+export function getWebsiteDomain() {
+    const websitePort = process.env.REACT_APP_WEBSITE_PORT || 3031;
+    const websiteUrl = process.env.REACT_APP_WEBSITE_URL || `http://localhost:${websitePort}`;
+    return getQueryParams("websiteDomain") ?? websiteUrl;
+}