[TIC-594] Allow an override for the back button on the account page (#24)

* feat(client): add redirectBackToUrl for redirect functions

* fix(client): use regular encode

* refactor(client): use options interface instead of extra param

* 2.0.12

Author: Itai Levi

package-lock.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/PropelAuth/javascript"
   },
-  "version": "2.0.11",
+  "version": "2.0.12",
   "keywords": [
     "auth",
     "user",

package.json

@@ -6,6 +6,11 @@ const LOGGED_OUT_AT_KEY = "__PROPEL_AUTH_LOGGED_OUT_AT"
 const AUTH_TOKEN_REFRESH_BEFORE_EXPIRATION_SECONDS = 10 * 60
 const DEBOUNCE_DURATION_FOR_REFOCUS_SECONDS = 60
 
+const encodeBase64 = (str: string) => {
+    const encode = window ? window.btoa : btoa
+    return encode(str)
+}
+
 export interface RedirectToSignupOptions {
     postSignupRedirectUrl?: string
     userSignupQueryParameters?: Record<string, string>
@@ -16,6 +21,22 @@ export interface RedirectToLoginOptions {
     userSignupQueryParameters?: Record<string, string>
 }
 
+export interface RedirectToAccountOptions {
+    redirectBackToUrl?: string
+}
+
+export interface RedirectToCreateOrgOptions {
+    redirectBackToUrl?: string
+}
+
+export interface RedirectToOrgPageOptions {
+    redirectBackToUrl?: string
+}
+
+export interface RedirectToSetupSAMLPageOptions {
+    redirectBackToUrl?: string
+}
+
 export interface IAuthClient {
     /**
      * If the user is logged in, this method returns an access token, the time (in seconds) that the token will expire,
@@ -48,18 +69,18 @@ export interface IAuthClient {
     /**
      * Gets the URL for the hosted account page.
      */
-    getAccountPageUrl(): string
+    getAccountPageUrl(options?: RedirectToAccountOptions): string
 
     /**
      * Gets the URL for the hosted organization page.
      * @param orgId The ID of the organization's page to load. If not specified, a random one will be used instead.
      */
-    getOrgPageUrl(orgId?: string): string
+    getOrgPageUrl(orgId?: string, options?: RedirectToOrgPageOptions): string
 
     /**
      * Gets the URL for the hosted create organization page.
      */
-    getCreateOrgPageUrl(): string
+    getCreateOrgPageUrl(options?: RedirectToCreateOrgOptions): string
 
     /**
      * Gets the URL for the hosted SAML configuration page.
@@ -79,18 +100,18 @@ export interface IAuthClient {
     /**
      * Redirects the user to the account page.
      */
-    redirectToAccountPage(): void
+    redirectToAccountPage(options?: RedirectToAccountOptions): void
 
     /**
      * Redirects the user to the organization page.
      * @param orgId The ID of the organization"s page to load. If not specified, a random one will be used instead.
      */
-    redirectToOrgPage(orgId?: string): void
+    redirectToOrgPage(orgId?: string, options?: RedirectToOrgPageOptions): void
 
     /**
      * Redirects the user to the create organization page.
      */
-    redirectToCreateOrgPage(): void
+    redirectToCreateOrgPage(options?: RedirectToCreateOrgOptions): void
 
     /**
      * Redirects the user to the SAML configuration page.
@@ -269,10 +290,9 @@ export function createClient(authOptions: IAuthOptions): IAuthClient {
         let qs = new URLSearchParams()
         let url = `${clientState.authUrl}/signup`
         if (options) {
-            const encode = window ? window.btoa : btoa
             const { postSignupRedirectUrl, userSignupQueryParameters } = options
             if (postSignupRedirectUrl) {
-                qs.set("rt", encode(postSignupRedirectUrl))
+                qs.set("rt", encodeBase64(postSignupRedirectUrl))
             }
             if (userSignupQueryParameters) {
                 Object.entries(userSignupQueryParameters).forEach(([key, value]) => {
@@ -290,10 +310,9 @@ export function createClient(authOptions: IAuthOptions): IAuthClient {
         let qs = new URLSearchParams()
         let url = `${clientState.authUrl}/login`
         if (options) {
-            const encode = window ? window.btoa : btoa
             const { postLoginRedirectUrl, userSignupQueryParameters } = options
             if (postLoginRedirectUrl) {
-                qs.set("rt", encode(postLoginRedirectUrl))
+                qs.set("rt", encodeBase64(postLoginRedirectUrl))
             }
             if (userSignupQueryParameters) {
                 Object.entries(userSignupQueryParameters).forEach(([key, value]) => {
@@ -307,24 +326,66 @@ export function createClient(authOptions: IAuthOptions): IAuthClient {
         return url
     }
 
-    const getAccountPageUrl = () => {
-        return `${clientState.authUrl}/account`
+    const getAccountPageUrl = (options?: RedirectToAccountOptions) => {
+        let qs = new URLSearchParams()
+        let url = `${clientState.authUrl}/account`
+        if (options) {
+            const { redirectBackToUrl } = options
+            if (redirectBackToUrl) {
+                qs.set("rt", encodeBase64(redirectBackToUrl))
+            }
+        }
+
+        if (qs.toString()) {
+            url += `?${qs.toString()}`
+        }
+        return url
     }
 
-    const getOrgPageUrl = (orgId?: string) => {
+    const getOrgPageUrl = (orgId?: string, options?: RedirectToOrgPageOptions) => {
+        let qs = new URLSearchParams()
+        let url = `${clientState.authUrl}/org`
         if (orgId) {
-            return `${clientState.authUrl}/org?id=${orgId}`
-        } else {
-            return `${clientState.authUrl}/org`
+            qs.set("id", orgId)
         }
+
+        if (options) {
+            if (options.redirectBackToUrl) {
+                qs.set("rt", encodeBase64(options.redirectBackToUrl))
+            }
+        }
+
+        if (qs.toString()) {
+            url += `?${qs.toString()}`
+        }
+        return url
     }
 
-    const getCreateOrgPageUrl = () => {
-        return `${clientState.authUrl}/create_org`
+    const getCreateOrgPageUrl = (options?: RedirectToCreateOrgOptions) => {
+        let qs = new URLSearchParams()
+        let url = `${clientState.authUrl}/create_org`
+        if (options) {
+            const { redirectBackToUrl } = options
+            if (redirectBackToUrl) {
+                qs.set("rt", encodeBase64(redirectBackToUrl))
+            }
+        }
+        if (qs.toString()) {
+            url += `?${qs.toString()}`
+        }
+        return url
     }
 
-    const getSetupSAMLPageUrl = (orgId: string) => {
-        return `${clientState.authUrl}/saml?id=${orgId}`
+    const getSetupSAMLPageUrl = (orgId: string, options?: RedirectToSetupSAMLPageOptions) => {
+        let qs = new URLSearchParams()
+        if (options) {
+            if (options.redirectBackToUrl) {
+                qs.set("rt", encodeBase64(options.redirectBackToUrl))
+            }
+        }
+        qs.set("id", orgId)
+
+        return `${clientState.authUrl}/saml?${qs.toString()}`
     }
 
     const client = {
@@ -395,20 +456,20 @@ export function createClient(authOptions: IAuthOptions): IAuthClient {
             return getLoginPageUrl(options)
         },
 
-        getAccountPageUrl(): string {
-            return getAccountPageUrl()
+        getAccountPageUrl(options?: RedirectToAccountOptions): string {
+            return getAccountPageUrl(options)
         },
 
-        getOrgPageUrl(orgId?: string): string {
-            return getOrgPageUrl(orgId)
+        getOrgPageUrl(orgId?: string, options?: RedirectToOrgPageOptions): string {
+            return getOrgPageUrl(orgId, options)
         },
 
-        getCreateOrgPageUrl(): string {
-            return getCreateOrgPageUrl()
+        getCreateOrgPageUrl(options?: RedirectToCreateOrgOptions): string {
+            return getCreateOrgPageUrl(options)
         },
 
-        getSetupSAMLPageUrl(orgId: string): string {
-            return getSetupSAMLPageUrl(orgId)
+        getSetupSAMLPageUrl(orgId: string, options?: RedirectToSetupSAMLPageOptions): string {
+            return getSetupSAMLPageUrl(orgId, options)
         },
 
         redirectToSignupPage(options?: RedirectToSignupOptions): void {
@@ -419,20 +480,20 @@ export function createClient(authOptions: IAuthOptions): IAuthClient {
             window.location.href = getLoginPageUrl(options)
         },
 
-        redirectToAccountPage(): void {
-            window.location.href = getAccountPageUrl()
+        redirectToAccountPage(options?: RedirectToAccountOptions): void {
+            window.location.href = getAccountPageUrl(options)
         },
 
-        redirectToOrgPage(orgId?: string): void {
-            window.location.href = getOrgPageUrl(orgId)
+        redirectToOrgPage(orgId?: string, options?: RedirectToOrgPageOptions): void {
+            window.location.href = getOrgPageUrl(orgId, options)
         },
 
-        redirectToCreateOrgPage(): void {
-            window.location.href = getCreateOrgPageUrl()
+        redirectToCreateOrgPage(options?: RedirectToCreateOrgOptions): void {
+            window.location.href = getCreateOrgPageUrl(options)
         },
 
-        redirectToSetupSAMLPage(orgId: string) {
-            window.location.href = getSetupSAMLPageUrl(orgId)
+        redirectToSetupSAMLPage(orgId: string, options?: RedirectToSetupSAMLPageOptions) {
+            window.location.href = getSetupSAMLPageUrl(orgId, options)
         },
 
         async logout(redirectAfterLogout: boolean): Promise<void> {

src/client.ts

@@ -1,7 +1,16 @@
 export type { AccessHelper, AccessHelperWithOrg } from "./access_helper"
 export type { AuthenticationInfo, User } from "./api"
 export { createClient } from "./client"
-export type { IAuthClient, IAuthOptions, RedirectToLoginOptions, RedirectToSignupOptions } from "./client"
+export type {
+    IAuthClient,
+    IAuthOptions,
+    RedirectToAccountOptions,
+    RedirectToCreateOrgOptions,
+    RedirectToLoginOptions,
+    RedirectToOrgPageOptions,
+    RedirectToSetupSAMLPageOptions,
+    RedirectToSignupOptions,
+} from "./client"
 export { ACTIVE_ORG_ID_COOKIE_NAME } from "./cookies"
 export { getActiveOrgId, setActiveOrgId } from "./org"
 export type { OrgIdToOrgMemberInfo, OrgMemberInfo } from "./org"