@stack-spot/auth-react 1.2.3 → 1.3.0

package/src/Login.tsx

@@ -0,0 +1,163 @@
+/* eslint-disable max-len */
+import { Button, IconBox, Input, Text } from '@citric/core'
+import { Github } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
+import { BannerWarning } from '@stack-spot/portal-components'
+import { MiniLogo } from '@stack-spot/portal-components/dist/components/MiniLogo'
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useState } from 'react'
+import { styled } from 'styled-components'
+
+export type LoginType = 'sso' | 'idp'
+
+interface BaseData {
+  type: LoginType,
+}
+
+interface SSOData extends BaseData {
+  type: 'sso',
+  email: string,
+}
+
+interface IDPData extends BaseData {
+  type: 'idp',
+  provider: 'external-idp:github',
+}
+
+type LoginData = SSOData | IDPData
+
+export type LoginProps = {
+  initialValue?: string,
+  onSubmit: (data: LoginData) => Promise<void>,
+  welcomeText?: string,
+  removeLoadingOnSuccess?: boolean,
+  className?: string,
+  style?: React.CSSProperties,
+  banner?: React.ReactNode,
+  loginTypes?: LoginType[]
+}
+
+const LoginBox = styled.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 24px;
+
+  header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+  }
+
+  .title {
+    font-size: 1rem;
+  }
+
+  .separator {
+    padding: 0 8px;
+    background-color: ${theme.color.light['400']};
+    color: ${theme.color.light['700']};
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    margin: 0;
+
+    &:before, &:after {
+      content: '';
+      height: 1px;
+      flex: 1;
+      background-color: ${theme.color.light['600']};
+    }
+  }
+
+  .error {
+    color: ${theme.color.danger['500']};
+    line-height: 1.5rem;
+  }
+`
+
+export const Login = ({ onSubmit, initialValue = '', welcomeText, removeLoadingOnSuccess, className, style, banner, loginTypes = ['idp', 'sso'] }: LoginProps) => {
+  const t = useTranslate(dictionary)
+  const searchParams = new URLSearchParams(location.search)
+  const [error, setError] = useState(searchParams.get('error_description') || searchParams.get('error') || '')
+  const [loading, setLoading] = useState(false)
+  const [email, setEmail] = useState(initialValue)
+  const disabled = !email.match(/\w+@\w+/)
+  const idpLoginEnabled = loginTypes.includes('idp')
+  const ssoLoginEnabled = loginTypes.includes('sso')
+
+  async function login(type: LoginType) {
+    setError('')
+    setLoading(true)
+    try {
+      const data: LoginData = type === 'sso' ? { type: 'sso', email } : { type: 'idp', provider: 'external-idp:github' }
+      await onSubmit(data)
+      if (removeLoadingOnSuccess) setLoading(false)
+    } catch (error: any) {
+      setLoading(false)
+      setError(error.message || error.toString())
+    }
+  }
+
+  function submitForm(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    if (disabled) return
+    login('sso')
+  }
+
+  return (
+    <>
+      <LoginBox onSubmit={submitForm} className={className} style={style}>
+        <header>
+          <MiniLogo />
+          <Text className="title">{welcomeText || t.welcome}</Text>
+        </header>
+        {ssoLoginEnabled && <>
+          <Input name="email" value={email} onChange={e => setEmail(e.target.value)} placeholder={t.placeholder} />
+          <Button colorScheme="primary" disabled={disabled || loading}>
+            {loading ? <LoadingCircular /> : <Text>{t.continue}</Text>}
+          </Button>
+        </>}
+        {ssoLoginEnabled && idpLoginEnabled && <p className="separator">{t.or}</p>}
+        {idpLoginEnabled &&
+          <Button colorScheme="light" type="button" onClick={() => login('idp')} disabled={loading}>
+            {loading ? <LoadingCircular /> : (
+              <>
+                <IconBox>
+                  <Github />
+                </IconBox>
+                <Text>{t.loginWithGithub}</Text>
+              </>
+            )}
+          </Button>}
+        {error && <Text className="error">{t.error}: {error}</Text>}
+      </LoginBox>
+      {banner ? <BannerWarning>
+        {banner}
+      </BannerWarning> : null}
+    </>
+  )
+}
+
+const dictionary = {
+  en: {
+    welcome: 'Welcome to StackSpot',
+    placeholder: 'your@email.com',
+    continue: 'Continue',
+    or: 'or',
+    loginWithGithub: 'Login with Github',
+    error: 'Error while attempting to login',
+  },
+  pt: {
+    welcome: 'Bem vindo à StackSpot',
+    placeholder: 'nome@email.com',
+    continue: 'Continuar',
+    or: 'ou',
+    loginWithGithub: 'Logar com o GitHub',
+    error: 'Erro ao fazer login',
+  },
+} satisfies Dictionary

package/src/SessionManager.ts

@@ -1,5 +1,6 @@
 import { AuthConfig, AuthManager, Session, ThirdPartyAuthType, ThirdPartyLoginParams } from '@stack-spot/auth'
 import { sessionCookie } from './utils/cookies'
+import { redirect } from './utils/redirect'
 
 const sessionKey = 'session'
 
@@ -76,7 +77,7 @@ export class SessionManager {
     const isSharedSessionTypeBlocked = this.config.blockedAuthTypes?.includes(sharedSessionCookie.type)
     if (isSharedSessionTypeBlocked) return false
     else if (isDifferentSessionActive || !session) {
-      this.startThirdPartyLogin(sharedSessionCookie)
+      await this.startThirdPartyLogin(sharedSessionCookie)
       return false
     }
     return true
@@ -94,11 +95,11 @@ export class SessionManager {
     return this.current!
   }
 
-  endSession(redirectToLogin = true) {
-    this.setSession(undefined)
+  async endSession(redirectToLogin = true) {
+    this.current = undefined
     localStorage.removeItem(sessionKey)
     sessionCookie.delete()
-    if (redirectToLogin) this.redirectToLoginUrl()
+    if (redirectToLogin) await redirect(this.config.loginUrl)
   }
 
   async logout() {
@@ -108,7 +109,7 @@ export class SessionManager {
       // eslint-disable-next-line no-console
       console.error(`Could not logout from IDM.\n${error}`)
     }
-    this.endSession()
+    await this.endSession()
   }
 
   async startThirdPartyLogin(data: ThirdPartyLoginParams) {
@@ -117,7 +118,7 @@ export class SessionManager {
       from: location.href,
       finalRedirect: params.get('finalRedirect'),
     })
-    location.href = authUrl
+    await redirect(authUrl)
   }
 
   urlHasThirdPartyLoginData() {
@@ -132,9 +133,9 @@ export class SessionManager {
     }
     const { session, data: { from, finalRedirect } } = await this.auth.completeThirdPartyLogin(location.search)
     this.setSession(session)
-    if (finalRedirect) location.href = finalRedirect
     history.replaceState(null, '', from || location.toString().replace(/\?.*$/, ''))
     this.sendLoginEventRd(this.current?.getTokenData().email, this.current?.getTokenData().name)
+    if (finalRedirect) await redirect(finalRedirect)
   }
 
   getEmailForLogin() {
@@ -155,10 +156,6 @@ export class SessionManager {
     }
   }
 
-  private redirectToLoginUrl() {
-    window.location.href = this.config.loginUrl
-  }
-
   private setSessionCookie(session: Session) {
     const { email, account_type, sub } = session.getTokenData()
     if (!email || !sub) return

package/src/index.ts

@@ -1,2 +1,5 @@
+export { Authenticated } from './Authenticated'
+export { Login } from './Login'
 export { SessionManager } from './SessionManager'
 export { useSession } from './hooks'
+

package/src/utils/cookies.ts

@@ -1,8 +1,8 @@
 import { ThirdPartyLoginParams } from "@stack-spot/auth"
+import { DOMAIN_REGEX } from './regex'
 
 const portalUrl = new URL(location.href)
-const domainRegex = new RegExp(/(\.*(prd|stg|dev)*.stackspot.com)|localhost/)
-const cookieDomain = domainRegex.exec(portalUrl.host)?.[0]
+const cookieDomain = DOMAIN_REGEX.exec(portalUrl.host)?.[0]
 const defaultCookieAttributes = `domain=${cookieDomain}; SameSite=Strict;`
 const sessionKey = `stk-session${cookieDomain}`
 

package/src/utils/hooks/use-effect-once.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * Code taken from https://blog.ag-grid.com/avoiding-react-18-double-mount/
+ * 
+ * Attention: don't use this hook unless you really have to!
+ * 
+ * This hook fixes the React 18 behavior of calling useEffect hooks twice in strict/development mode, which ruins some mounting/unmounting
+ * behaviors.
+ * 
+ * @param effect refer to React's useEffect.
+ */
+export const useEffectOnce = (effect: () => void | (() => void)) => {
+  const effectFn = useRef<() => void | (() => void)>(effect)
+  const destroyFn = useRef<void | (() => void)>()
+  const effectCalled = useRef(false)
+  const rendered = useRef(false)
+  const [, setVal] = useState<number>(0)
+
+  if (effectCalled.current) {
+    rendered.current = true
+  }
+
+  useEffect(() => {
+    // only execute the effect first time around
+    if (!effectCalled.current) {
+      destroyFn.current = effectFn.current()
+      effectCalled.current = true
+    }
+
+    // this forces one render after the effect is run
+    setVal((val) => val + 1)
+
+    return () => {
+      // if the comp didn't render since the useEffect was called,
+      // we know it's the dummy React cycle
+      if (!rendered.current) return
+
+      // otherwise this is not a dummy destroy, so call the destroy func
+      if (destroyFn.current) destroyFn.current()
+    }
+  }, [])
+}

package/src/utils/redirect.ts

@@ -0,0 +1,11 @@
+
+
+export const redirect = async (url: string) => {
+  window.location.href = url
+  /**
+   * This is intentional. The promise bellow will never be fulfilled.
+   * Once the set href is not instantaneous, this will guarantee no further code is executed until the user is really redirected.
+   * Particularly useful to prevent flickering page renders on scenarios with redirects.
+   */
+  await new Promise(() => '')
+}

package/src/utils/regex.ts

@@ -0,0 +1 @@
+export const DOMAIN_REGEX = new RegExp(/(\.*(prd|stg|dev)*.stackspot.com)|localhost/)

package/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "module": "ESNext",
+    "jsx": "react-jsx",
     "rootDir": "src"
   },
-  "include": ["src"]
+  "include": [
+    "src"
+  ]
 }