diff --git a/web/packages/teleport/src/Login/Login.story.tsx b/web/packages/teleport/src/Login/Login.story.tsx index bf0b5cef983cb..5804c5f1701a8 100644 --- a/web/packages/teleport/src/Login/Login.story.tsx +++ b/web/packages/teleport/src/Login/Login.story.tsx @@ -43,6 +43,7 @@ const sample: State = { isSuccess: true, message: '', }, + checkingValidSession: false, onLogin: () => null, onLoginWithWebauthn: () => null, onLoginWithSso: () => null, diff --git a/web/packages/teleport/src/Login/Login.tsx b/web/packages/teleport/src/Login/Login.tsx index 46cbe096fab26..932e0dc6eaf56 100644 --- a/web/packages/teleport/src/Login/Login.tsx +++ b/web/packages/teleport/src/Login/Login.tsx @@ -38,6 +38,7 @@ export function Login({ onLoginWithSso, authProviders, auth2faType, + checkingValidSession, preferredMfaType, isLocalAuthEnabled, clearAttempt, @@ -47,6 +48,12 @@ export function Login({ showMotd, acknowledgeMotd, }: State) { + // while we are checking if a session is valid, we don't return anything + // to prevent flickering. The check only happens for a frame or two so + // we avoid rendering a loader/indicator since that will flicker as well + if (checkingValidSession) { + return null; + } return ( <> diff --git a/web/packages/teleport/src/Login/useLogin.ts b/web/packages/teleport/src/Login/useLogin.ts index 67fa354ed4240..17aed626c158e 100644 --- a/web/packages/teleport/src/Login/useLogin.ts +++ b/web/packages/teleport/src/Login/useLogin.ts @@ -16,16 +16,18 @@ * along with this program. If not, see . */ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { useAttempt } from 'shared/hooks'; import { AuthProvider } from 'shared/services'; +import session from 'teleport/services/websession'; import history from 'teleport/services/history'; import cfg from 'teleport/config'; import auth, { UserCredentials } from 'teleport/services/auth'; export default function useLogin() { const [attempt, attemptActions] = useAttempt({ isProcessing: false }); + const [checkingValidSession, setCheckingValidSession] = useState(true); const authProviders = cfg.getAuthProviders(); const auth2faType = cfg.getAuth2faType(); @@ -44,6 +46,14 @@ export default function useLogin() { setShowMotd(false); } + useEffect(() => { + if (session.isValid()) { + history.replace(cfg.routes.root); + return; + } + setCheckingValidSession(false); + }, []); + function onLogin(email, password, token) { attemptActions.start(); auth @@ -74,6 +84,7 @@ export default function useLogin() { return { attempt, onLogin, + checkingValidSession, onLoginWithSso, authProviders, auth2faType,