@cdmbase/wiki-browser 12.0.18-alpha.5

package/lib/templates/content/docs/adminide-modules/account/index.md

@@ -0,0 +1,14 @@
+---
+meta:
+    title: Account
+    description: Account
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Account ...
+headers:
+    Cache-Control: no-cache
+---
+
+## Account
+
+**[Facebook Setup](/docs/account/auth0-login)**

package/lib/templates/content/docs/adminide-modules/account/keycloak-remix-setup.md

@@ -0,0 +1,86 @@
+---
+meta:
+    title: Keycloak Authentication Setup with Remix
+    description: Keycloak Authentication Setup with Remix
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Keycloak Authentication Setup with Remix ...
+headers:
+    Cache-Control: no-cache
+---
+
+# Keycloak Authentication Setup with Remix
+
+## Introduction
+
+This documentation outlines the steps required to set up Keycloak authentication with Remix, utilizing a custom Keycloak strategy. The setup involves configuring the Keycloak dashboard, defining a resource route, and managing user sessions.
+
+## Keycloak Strategy Configuration
+
+We set up a separate Keycloak strategy to be used for authentication:
+
+```javascript
+new KeycloakStrategy() <
+    T >
+    ({
+        useSSL: true,
+        domain: config.KEYCLOAK_SERVER_DOMAIN,
+        realm: config.KEYCLOAK_REALM,
+        clientID: config.KEYCLOAK_CLIENT_ID,
+        clientSecret: config.KEYCLOAK_CLIENT_SECRET,
+        callbackURL: config.CALLBACK_REDIRECT_URL,
+    },
+    callback);
+```
+
+Get the values for `KEYCLOAK_CLIENT_ID`, `KEYCLOAK_CLIENT_SECRET`, and `KEYCLOAK_REALM` from the [Keycloak dashboard](https://keycloak.cdebase.dev/).
+
+## Resource Route Setup
+
+We set up a resource route in the `user-auth-browser` package at `/resources/auth-keycloak`. The purpose of this resource route is to handle the `authentication` request using the Keycloak strategy we configured. You can check `authenticator.server.ts` to see its implementation.
+
+## Login Button Integration
+
+We have set up a login button on the login page of the `ant` package. When the login button is clicked, it calls the resource route `/resources/auth-keycloak`.
+
+## Post-Login Flow
+
+Once the user is logged in and redirected back to our platform, the authenticator calls the Keycloak strategy to validate the code received and exchange it for tokens. These tokens are then saved in session storage (using either Redis or cookies, depending on the configuration).
+
+## Backend Token Validation
+
+For the backend to validate the token properly, ensure the following environment variables are set up:
+
+1. `AUTH0_API_AUDIENCE = cdebase` (or whatever the client audience is set in your client configuration from the Keycloak dashboard)
+2. `AUTH0_ISSUER = https://keycloak.cdebase.dev/realms/master`
+3. `AUTH_JWKS_URI = https://keycloak.cdebase.dev/realms/master/protocol/openid-connect/certs`
+
+## Keycloak Admin Client
+
+We are using the `@keycloak/keycloak-admin-client` to fetch information about user profiles and perform other data manipulations.
+
+## Keycloak Dashboard Configuration
+
+Following are the important points related to Keycloak dashboard configuration:
+
+1. **Setup a new client:** Import service account roles and client scopes.
+2. **SSO Configuration:** Configure the identity provider and set up the client ID and secret obtained from the developer's account. Set the redirect URI in the developer account of the app you are setting up (e.g., Google SSO). The redirect URI would be like this: `https://keycloak.cdebase.dev/realms/master/broker/google/endpoint`. You can copy it after you save the identity configuration.
+3. **Profile Picture from SSO:** To get the user's profile picture from SSO, you need to define a mapper. Check this [Stack Overflow thread](https://stackoverflow.com/questions/42808008/how-to-get-current-user-profile-picture-with-keycloak) for proper configuration.
+
+### Cleint Settings
+
+![Client Settings](/assets/images/client-settings.png)
+
+![Client Accounts](/assets/images/service-accounts.png)
+
+### Client Scopes ( Custom Scope )
+
+![Client Scopes](/assets/images/additional-parameters.png)
+
+### SSO Configuration
+
+![SSO Settings](/assets/images/sso-settings.png)
+
+![SSO Mappers](/assets/images/sso-mappers.png)
+
+![SSO Picture Mapper](/assets/images/sso-picture-mapper.png)

package/lib/templates/content/docs/adminide-modules/account/remix-auth-setup.md

@@ -0,0 +1,79 @@
+---
+meta:
+    title: Remix Auth Setup
+    description: Remix Auth Setup
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Remix Auth Setup ...
+headers:
+    Cache-Control: no-cache
+---
+
+# Remix Authentication Flow
+
+## Overview
+
+The authentication flow in our Remix application involves several key steps and components. This document outlines the process, focusing on the login route, session state handling, returnTo parameter, and the callback URL.
+
+## Login Route
+
+The login route calls the resource API (`auth-resource`) from the `web-authentication` class via a call from a Redux epic. The purpose of this API is to set the session state and the `returnTo` URL before the login happens.
+
+### Session State
+
+While authenticating using Auth0, the state parameter is received and returned to us in the callback URL. We validate the response to ensure it has the correct state parameter to prevent response hijacking or modification. The `RemixAuth0Strategy` sets the session state in session storage, which is then compared during the Proof Key for Code Exchange (PKCE) process.
+**Example Code:**
+
+```javascript
+const session = await sessionStorage.getSession(request.headers.get('Cookie'));
+const state = v4(); // Generate a new state value
+await session.set(SESSION_STATE_KEY, state); // Set the state in session storage
+```
+
+### ReturnTo Parameter
+
+The returnTo parameter is used for redirection after a successful login. For instance, if you were at a route and the session expired, or you visited the page after some time and the session was no longer valid, it will redirect you to the login page with the returnTo parameter set as a query parameter. This parameter contains the previous route, ensuring the user is redirected to their intended destination after login.
+
+```javascript
+const returnToCookie = await getReturnToCookie();
+const sessionStorage = await getSessionStorage({ request, context });
+const session = await sessionStorage.getSession(request.headers.get('Cookie'));
+const state = v4(); // Generate a new state value
+await session.set(SESSION_STATE_KEY, state); // Set the state in session storage
+const headers = [
+    ['Set-Cookie', await sessionStorage.commitSession(session)], // Commit the session
+    ['Set-Cookie', await returnToCookie.serialize(returnToPath)], // Set the returnTo cookie
+];
+return json({ state }, { headers });
+```
+
+### Callback URL
+
+The callback URL is executed when the response comes back from Auth0. Here, we call the authenticate method of the RemixAuth strategy, which will validate the code received in the callback URL and exchange it for the idToken, accessToken, and refreshToken. These tokens are saved in our session storage. Additionally, if the returnTo cookie is set, we retrieve it and redirect to the route it contains.
+
+```javascript
+const session = await sessionStorage.getSession(request.headers.get('Cookie'));
+logger.debug('Session fetched.');
+
+session.set(SESSION_KEY, result); // Set authentication result in session
+session.set(SESSION_STRATEGY_KEY, 'auth0');
+logger.debug('Session updated with authentication result.');
+
+context.store.dispatch(
+    setUserAccountDetails({ id: result.userId, auth0UserId: result.auth0UserId, profile: result.profile }),
+);
+logger.debug('User account details set in context store.');
+
+let redirectPath = '';
+if (!result.userId) {
+    logger.warn('User ID not found, redirecting to VerifyUser.');
+    redirectPath = Auth0Routes.VerifyUser;
+} else {
+    redirectPath = returnTo;
+    logger.debug(`User authenticated, redirecting to: ${returnTo}`);
+}
+
+throw redirect(redirectPath, {
+    headers: [['Set-Cookie', await sessionStorage.commitSession(session)]],
+});
+```

package/lib/templates/content/docs/adminide-modules/account/various-auth-qatest.md

@@ -0,0 +1,157 @@
+---
+meta:
+    title: Remix Token Renewal Flow
+    description: Remix Token Renewal Flow
+date: '2023-06-02T00:00:00'
+updated: '2024-06-02T00:00:00'
+excerpt: Remix Token Renewal Flow ...
+headers:
+    Cache-Control: no-cache
+---
+
+# Remix Token Renewal Flow
+
+## Overview
+
+The renewal of tokens happens at two key points in our system: within the Remix middleware and during GraphQL server requests. This document details both processes, ensuring that tokens are renewed as needed to maintain user authentication.
+
+### Token Renewal at remix
+
+The middleware in Remix checks if a route is protected and whether the user has the necessary rights to access the page. If the user is not authenticated or if their idToken has expired, the middleware attempts to renew the token.
+
+```javascript
+// File Location: https://github.com/CDEBase/adminIde-stack/blob/508f42f4dffa5e40f612c68120b1d875be1b644c/packages-modules/user-auth0/client/src/auth/RemixAuth0Authenticator.server.ts#L82
+
+let authInfo = await this.isAuthenticated(request);
+if (!authInfo) {
+    return { sessionInfo: null, redirect: config.LOGIN_PATH }; // Consider using failureRedirect option
+}
+const { expiresAt, refreshToken, rememberMe = false } = authInfo as SessionCookiePayload;
+if (this.isTokenValid(expiresAt)) {
+    return { sessionInfo: authInfo };
+}
+if (this.canRenewToken({ expiresAt, rememberMe })) {
+    let result;
+    try {
+        result = await this.getNewToken(refreshToken);
+    } catch (err) {
+        console.error('RenewToken failed!', err);
+        throw new Error(AuthErrors.ResponseNotSuccessful);
+    }
+    if (result && result.data && result.data.renewAuthUsingRefreshToken) {
+        const renewedIdToken = result.data.renewAuthUsingRefreshToken.idToken;
+        const renewedAccessToken = result.data.renewAuthUsingRefreshToken.accessToken;
+        const decodedJwt = jwtDecode(renewedIdToken);
+        let newExpiryTime = decodedJwt.exp;
+        // make use of given expiresIn, if not available use default 8 hours
+        if (config.isDev) {
+            // this is only for logging purpose until we see both are equal
+            const expiresIn = result.data.renewAuthUsingRefreshToken.expiresIn;
+            const currentTime = Math.floor(Date.now() / 1000);
+            const calculatedExpiresAt = currentTime + expiresIn;
+
+            console.log(
+                '--- calculatedExpiresAt: ',
+                calculatedExpiresAt,
+                '--- jwtDecoded.exp: ',
+                newExpiryTime,
+            );
+            // above one giving 24 hours but jwt is not created that long.
+            console.log('--- setting to jwtDecoded.exp until they both gives equal');
+        }
+        const session = await this.sessionStore.getSession(request.headers.get('Cookie'));
+        const sessionPayload = session.get(SESSION_KEY);
+        const renewedSessionInfo = {
+            ...sessionPayload,
+            idToken: renewedIdToken,
+            expiresAt: newExpiryTime,
+            accessToken: renewedAccessToken,
+        };
+
+        if (!renewedIdToken) {
+            return { sessionInfo: null, redirect: config.LOGIN_PATH, expireCookie: true };
+        }
+
+        return { sessionInfo: renewedSessionInfo, renewed: true }; // Ensuring redirect logic is clear
+    } else {
+        return { sessionInfo: null, redirect: config.LOGIN_PATH };
+    }
+}
+
+return { sessionInfo: null, redirect: config.LOGIN_PATH, expireCookie: true };
+```
+
+### Token Renewal at Graphql endpoint.
+
+The second place where token renewal occurs is within the middleware executed on the GraphQL server. This ensures that tokens are renewed even if the user has been on the same page for longer than the token expiration time, as the Remix middleware won't execute in this case.
+
+```javascript
+// File location: https://github.com/CDEBase/adminIde-stack/blob/508f42f4dffa5e40f612c68120b1d875be1b644c/packages-modules/user-auth0/server/src/auth/auth0/auth0RenewTokenHelper.ts#L35
+
+export const auth0RenewTokenHelper = async (requestResponsePair, logger: CdmLogger.ILogger) => {
+    try {
+        const { req, res } = requestResponsePair;
+        const sessionStorage = await getSessionStorage({
+            request: req,
+            context: { redisClient: req.redisClient } as IAppLoadContext,
+        });
+        const session = await sessionStorage.getSession(req.headers['cookie']);
+
+        const sessionPayload = session.get(SESSION_KEY);
+        logger.trace('(auth0RenewTokenHelper) session cookie payload: [%j]', sessionPayload);
+
+        const idToken = sessionPayload?.idToken;
+        const expiresAt = sessionPayload?.expiresAt;
+        const refreshToken = sessionPayload?.refreshToken;
+        logger.trace(
+            `(auth0RenewTokenHelper) ID Token: ${
+                idToken ? '********' : 'None'
+            }, Expires At: ${expiresAt}, Refresh Token: ${refreshToken ? '********' : 'None'}`,
+        );
+
+        const isRenewApplicable = canRenewToken(session, logger);
+        logger.trace(`(auth0RenewTokenHelper) Is token renewal applicable? ${isRenewApplicable}`);
+
+        if (isRenewApplicable) {
+            const result = await renewAuthUsingRefreshToken(refreshToken, logger);
+            const renewedIdToken = result?.idToken;
+            const renewedAccessToken = result?.accessToken;
+            logger.trace(
+                '(auth0RenewTokenHelper) Token renewed using refresh token:',
+                renewedIdToken ? '********' : 'None',
+            );
+
+            if (renewedIdToken) {
+                const decodedJwt = jwtDecode(renewedIdToken);
+                const newExpiryTime = decodedJwt.exp;
+                logger.trace(`(auth0RenewTokenHelper) New token expiry time: ${newExpiryTime}`);
+
+                await session.set(SESSION_KEY, {
+                    ...sessionPayload,
+                    idToken: renewedIdToken,
+                    expiresAt: newExpiryTime * 1000,
+                    accessToken: renewedAccessToken,
+                });
+
+                const updatedSession = await sessionStorage.commitSession(session);
+
+                if (updatedSession) {
+                    res.setHeader('Set-Cookie', updatedSession);
+                    req.headers['authorization'] = `Bearer ${renewedIdToken}`; // Update authorization header for the current request
+                    logger.trace('(auth0RenewTokenHelper) Token renewal successful, headers updated');
+                } else {
+                    logger.error('(auth0RenewTokenHelper) Updated session is undefined');
+                    throw new Error('Failed to update session');
+                }
+            }
+        } else {
+            logger.trace('(auth0RenewTokenHelper) Token is not renewable');
+            throw new Error('Failed to renew token');
+        }
+    } catch (error) {
+        logger.error(error, '(auth0RenewTokenHelper) AUTH RENEW TOKEN ERROR:');
+        throw new AuthRenewTokenError();
+    }
+};
+
+```