docs(changeset): Change how login and logout redirect are handled

Author: GuptaSiddhant

.changeset/brave-suns-kiss.md

@@ -0,0 +1,6 @@
+---
+"@storybooker/adapter-azure": patch
+"@storybooker/core": patch
+---
+
+Change how login and logout redirect are handled

packages/adapter-azure/src/easy-auth.ts

@@ -17,10 +17,10 @@ export interface AzureEasyAuthUser extends StoryBookerUser {
 
 export type AzureEasyAuthRoleMap = Map<string, Permission[]>;
 
-const DEFAULT_AUTHORISE: AuthServiceAuthorise<AzureEasyAuthUser> = (
-  { action },
-  { user },
-) => {
+const DEFAULT_AUTHORISE: AuthServiceAuthorise<AzureEasyAuthUser> = ({
+  permission,
+  user,
+}) => {
   if (!user) {
     return false;
   }
@@ -29,23 +29,25 @@ const DEFAULT_AUTHORISE: AuthServiceAuthorise<AzureEasyAuthUser> = (
     return true;
   }
 
-  if (action === "read") {
+  if (permission.action === "read") {
     return true;
   }
 
   return Boolean(user.roles && user.roles.length > 0);
 };
 
 export class AzureEasyAuthService implements AuthService<AzureEasyAuthUser> {
-  authorise: AuthServiceAuthorise<AzureEasyAuthUser>;
+  authorise: AuthService<AzureEasyAuthUser>["authorise"];
 
   constructor(
     authorise: AuthServiceAuthorise<AzureEasyAuthUser> = DEFAULT_AUTHORISE,
   ) {
     this.authorise = authorise;
   }
 
-  async getUserDetails(request: Request): Promise<AzureEasyAuthUser> {
+  getUserDetails: AuthService<AzureEasyAuthUser>["getUserDetails"] = async (
+    request,
+  ) => {
     const principalHeader = request.headers.get("x-ms-client-principal");
     if (!principalHeader) {
       throw new Response(
@@ -95,9 +97,18 @@ export class AzureEasyAuthService implements AuthService<AzureEasyAuthUser> {
       title: roles.join(", "),
       type: "user",
     };
-  }
+  };
+
+  login: AuthService<AzureEasyAuthUser>["login"] = async (request) => {
+    const url = new URL("/.auth/login", request.url);
+
+    return new Response(null, {
+      headers: { Location: url.toString() },
+      status: 302,
+    });
+  };
 
-  logout: (request: Request) => Promise<Response> = async (request) => {
+  logout: AuthService<AzureEasyAuthUser>["logout"] = async (request) => {
     const url = new URL("/.auth/logout", request.url);
 
     return new Response(null, {

packages/core/src/root/routes.ts

@@ -2,7 +2,7 @@ import { CONTENT_TYPES } from "#constants";
 import { ProjectsModel } from "#projects/model";
 import { defineRoute } from "#router";
 import { getStore } from "#store";
-import { URLS } from "#urls";
+import { urlBuilder, URLS } from "#urls";
 import { authenticateOrThrow } from "#utils/auth";
 import { checkIsJSONRequest } from "#utils/request";
 import {
@@ -89,38 +89,41 @@ export const login = defineRoute("get", URLS.ui.login, undefined, async () => {
   if (!auth?.login) {
     return responseError(translation.errorMessages.auth_setup_missing, 404);
   }
-  const serviceUrl = url.replace(URLS.ui.login, "");
-  const response = await auth.login(request, serviceUrl);
-
-  if (response.status >= 300 && response.status < 400) {
-    return responseRedirect(
-      response.headers.get("Location") || "/",
-      response.status,
-    );
+
+  const response = await auth.login(request);
+
+  if (response.status >= 400) {
+    return response;
   }
 
-  return response;
+  const redirectTo = new URL(url).searchParams.get("redirect") || "";
+
+  return responseRedirect(url.replace(URLS.ui.login, redirectTo), {
+    headers: response.headers,
+    status: 302,
+  });
 });
 
 export const logout = defineRoute(
   "get",
   URLS.ui.logout,
   undefined,
   async () => {
-    const { auth, request, translation, user } = getStore();
+    const { auth, request, translation, url, user } = getStore();
     if (!auth?.logout || !user) {
       return responseError(translation.errorMessages.auth_setup_missing, 404);
     }
 
     const response = await auth.logout(request, user);
-    if (response.status >= 300 && response.status < 400) {
-      return responseRedirect(
-        response.headers.get("Location") || "/",
-        response.status,
-      );
+    if (response.status >= 400) {
+      return response;
     }
 
-    return response;
+    const serviceUrl = url.replace(URLS.ui.logout, "");
+    return responseRedirect(serviceUrl, {
+      headers: response.headers,
+      status: 302,
+    });
   },
 );
 
@@ -138,13 +141,13 @@ export const account = defineRoute(
       const serviceUrl = url.replace(URLS.ui.account, "");
 
       if (auth.login) {
-        return await auth.login(request, serviceUrl);
+        return responseRedirect(urlBuilder.login(URLS.ui.account), 302);
       }
 
       return responseRedirect(serviceUrl, 404);
     }
 
-    const children = await auth.renderAccount?.(request, user);
+    const children = await auth.renderAccountDetails?.(request, user);
 
     return responseHTML(renderAccountPage({ children }));
   },

packages/core/src/services/auth.ts

@@ -0,0 +1,99 @@
+/**
+ * Service adapter to manage authentication.
+ *
+ * The service is responsible to authorise users from
+ * accessing the app.
+ */
+export interface AuthService<
+  AuthUser extends StoryBookerUser = StoryBookerUser,
+> {
+  /**
+   * An optional method that is called on app boot-up
+   * to run async setup functions.
+   * Preferably, this function should not throw errors.
+   */
+  init?: () => Promise<void>;
+
+  /**
+   * This callback is called before every protected route and determines if user
+   * has access to the route. It receives a permission object.
+   *
+   * - Respond with `true` to allow user to proceed.
+   * - Respond with `false` to block user.
+   * - Respond with `Response` to return custom response
+   */
+  authorise: AuthServiceAuthorise<AuthUser>;
+
+  /**
+   * Get details about the user based on incoming request.
+   *
+   * Throw an error or response (redirect-to-login) if it is a unauthenticated/unauthorised request.
+   */
+  getUserDetails: (request: Request) => Promise<AuthUser | null>;
+
+  /**
+   * Get user to login from UI. The returning response should create auth session.
+   * User will be redirected automatically after function is resolved.
+   */
+  login?: (request: Request) => Promise<Response> | Response;
+
+  /**
+   * Get user to logout from UI. The returning response should clear auth session.
+   * User will be redirected automatically after function is resolved.
+   */
+  logout?: (request: Request, user: AuthUser) => Promise<Response> | Response;
+
+  /**
+   * Render custom HTML in account page. Must return valid HTML string;
+   */
+  renderAccountDetails?: (
+    request: Request,
+    user: AuthUser,
+  ) => Promise<string> | string;
+}
+
+/**
+ * Type for the callback function to check permissions.
+ *
+ * Return true to allow access, or following to deny:
+ * - false - returns 403 response
+ * - Response - returns the specified HTTP response
+ */
+export type AuthServiceAuthorise<
+  AuthUser extends StoryBookerUser = StoryBookerUser,
+> = (params: {
+  permission: PermissionWithKey;
+  request: Request;
+  user: AuthUser | undefined | null;
+}) => Promise<boolean | Response> | boolean | Response;
+
+/**  Type of permission to check */
+export interface Permission {
+  action: PermissionAction;
+  projectId: string | undefined;
+  resource: PermissionResource;
+}
+/** Permission object with key */
+export type PermissionWithKey = Permission & { key: PermissionKey };
+/** Permission in a string format */
+export type PermissionKey =
+  `${PermissionResource}:${PermissionAction}:${string}`;
+/** Type of possible resources to check permissions for */
+export type PermissionResource =
+  | "project"
+  | "build"
+  | "label"
+  | "openapi"
+  | "ui";
+/** Type of possible actions to check permissions for */
+export type PermissionAction = "create" | "read" | "update" | "delete";
+
+/**
+ * Base representation of a generic User
+ */
+export interface StoryBookerUser {
+  id: string;
+  displayName: string;
+  imageUrl?: string;
+  title?: string;
+}

packages/core/src/types.ts

@@ -1,7 +1,9 @@
+import type { AuthService, StoryBookerUser } from "./services/auth";
 import type { DatabaseService } from "./services/database";
 import type { Translation } from "./translations";
 
 export type * from "./services/database";
+export type * from "./services/auth";
 
 /**
  * Options for creating a request handler.
@@ -86,12 +88,6 @@ export interface LoggerService {
   log: (...args: unknown[]) => void;
 }
 
-export interface DatabaseDocumentListOptions<Item extends { id: string }> {
-  limit?: number;
-  filter?: string | ((item: Item) => boolean);
-  select?: string[];
-  sort?: "latest" | ((item1: Item, item2: Item) => number);
-}
 /**
  * Service to interact with file-storage.
  *
@@ -179,94 +175,3 @@ export interface BrandTheme {
     default: string;
   };
 }
-
-/**
- * Service to manage authentication.
- *
- * The service is responsible to authorise users from
- * accessing the app.
- */
-export interface AuthService<
-  AuthUser extends StoryBookerUser = StoryBookerUser,
-> {
-  /**
-   * An optional method that is called on app boot-up
-   * to run async setup functions.
-   * Preferably, this function should not throw errors.
-   */
-  init?: () => Promise<void>;
-  /**
-   * This callback is called before every protected route and determines if user
-   * has access to the route. It receives a permission object.
-   *
-   * - Response with `true` to allow user to proceed.
-   * - Respond with `false` to block user.
-   * - Respond with `Response` to return custom response
-   */
-  authorise: AuthServiceAuthorise<AuthUser>;
-  /**
-   * Get details about the user based on incoming request.
-   *
-   * Throw an error or response (redirect-to-login) if it is a unauthenticated/anauthorised request.
-   */
-  getUserDetails: (request: Request) => Promise<AuthUser | null>;
-  /**
-   * Get user to login from UI. The returning response should redirect user back to serviceUrl.
-   */
-  login?: (
-    request: Request,
-    serviceUrl: string,
-  ) => Promise<Response> | Response;
-  /**
-   * Get user to logout from UI. The returning response should clear auth session.
-   */
-  logout?: (request: Request, user: AuthUser) => Promise<Response> | Response;
-  /**
-   * Render custom HTML in account page. Must return valid HTML string;
-   */
-  renderAccount?: (
-    request: Request,
-    user: AuthUser,
-  ) => Promise<string> | string;
-}
-
-/**
- * Type for the callback function to check permissions.
- *
- * Return true to allow access, or following to deny:
- * - false - returns 403 response
- * - Response - returns the specified HTTP response
- */
-export type AuthServiceAuthorise<
-  AuthUser extends StoryBookerUser = StoryBookerUser,
-> = (
-  permission: PermissionWithKey,
-  options: { request: Request; user: AuthUser | undefined | null },
-) => Promise<boolean | Response> | boolean | Response;
-
-/**  Type of permission to check */
-export interface Permission {
-  action: PermissionAction;
-  projectId: string | undefined;
-  resource: PermissionResource;
-}
-export type PermissionWithKey = Permission & { key: PermissionKey };
-export type PermissionKey =
-  `${PermissionResource}:${PermissionAction}:${string}`;
-/** Type of possible resources to check permissions for */
-export type PermissionResource =
-  | "project"
-  | "build"
-  | "label"
-  | "openapi"
-  | "ui";
-
-/** Type of possible actions to check permissions for */
-export type PermissionAction = "create" | "read" | "update" | "delete";
-
-export interface StoryBookerUser {
-  id: string;
-  displayName: string;
-  imageUrl?: string;
-  title?: string;
-}

packages/core/src/urls.ts

@@ -59,6 +59,9 @@ export const urlBuilder = {
   root: (): string => {
     return href(URLS.ui.root);
   },
+  login: (redirect: string): string => {
+    return href(URLS.ui.login, null, { redirect });
+  },
   staticFile: (filepath: string): string => {
     return href(URLS.ui.catchAll, { filepath });
   },
@@ -69,12 +72,10 @@ export const urlBuilder = {
     return href(URLS.projects.create);
   },
   projectId: (projectId: string): string => {
-    const url = href(URLS.projects.id, { projectId });
-    return url.toString();
+    return href(URLS.projects.id, { projectId });
   },
   projectIdUpdate: (projectId: string): string => {
-    const url = href(URLS.projects.update, { projectId });
-    return url.toString();
+    return href(URLS.projects.update, { projectId });
   },
   allBuilds: (projectId: string): string => {
     const { prefix, request } = getStore();