feat: log out and redirect user when converting to oidc (#8347)

* feat: log out user on conver to oidc

Log out user and redirect to login page and log out user when
they convert to oidc.

site/src/components/SignInForm/SignInForm.tsx

@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme) => ({
       fontWeight: 600,
     },
   },
-  error: {
+  alert: {
     marginBottom: theme.spacing(4),
   },
   divider: {
@@ -69,6 +69,7 @@ export interface SignInFormProps {
   isSigningIn: boolean
   redirectTo: string
   error?: unknown
+  info?: string
   authMethods?: AuthMethods
   onSubmit: (credentials: { email: string; password: string }) => void
   // initialTouched is only used for testing the error state of the form.
@@ -80,6 +81,7 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
   redirectTo,
   isSigningIn,
   error,
+  info,
   onSubmit,
   initialTouched,
 }) => {
@@ -100,10 +102,15 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
         <strong>{commonTranslation.t("coder")}</strong>
       </h1>
       <Maybe condition={error !== undefined}>
-        <div className={styles.error}>
+        <div className={styles.alert}>
           <ErrorAlert error={error} />
         </div>
       </Maybe>
+      <Maybe condition={Boolean(info) && info !== "" && error === undefined}>
+        <div className={styles.alert}>
+          <Alert severity="info">{info}</Alert>
+        </div>
+      </Maybe>
       <Maybe condition={passwordEnabled && showPasswordAuth}>
         <PasswordSignInForm
           onSubmit={onSubmit}

site/src/pages/LoginPage/LoginPageView.tsx

@@ -25,6 +25,9 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
   const { error } = context
   const data = context.data as UnauthenticatedData
   const styles = useStyles()
+  // This allows messages to be displayed at the top of the sign in form.
+  // Helpful for any redirects that want to inform the user of something.
+  const info = new URLSearchParams(location.search).get("info") || undefined
 
   return isLoading ? (
     <FullScreenLoader />
@@ -37,6 +40,7 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
           redirectTo={redirectTo}
           isSigningIn={isSigningIn}
           error={error}
+          info={info}
           onSubmit={onSignIn}
         />
         <footer className={styles.footer}>

site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx

@@ -5,8 +5,6 @@ import Box from "@mui/material/Box"
 import GitHubIcon from "@mui/icons-material/GitHub"
 import KeyIcon from "@mui/icons-material/VpnKey"
 import Button from "@mui/material/Button"
-import { useLocation } from "react-router-dom"
-import { retrieveRedirect } from "utils/redirect"
 import Typography from "@mui/material/Typography"
 import { convertToOAUTH } from "api/api"
 import { AuthMethods, LoginType, UserLoginType } from "api/typesGenerated"
@@ -27,19 +25,31 @@ type LoginTypeConfirmation =
       selectedType: LoginType
     }
 
-export const redirectToOIDCAuth = (stateString: string, redirectTo: string) => {
-  window.location.href = `/api/v2/users/oidc/callback?oidc_merge_state=${stateString}&redirect=${redirectTo}`
+export const redirectToOIDCAuth = (
+  toType: string,
+  stateString: string,
+  redirectTo: string,
+) => {
+  window.location.href = `/api/v2/users/${toType}/callback?oidc_merge_state=${stateString}&redirect=${redirectTo}`
 }
 
 export const useSingleSignOnSection = () => {
-  const location = useLocation()
-  const redirectTo = retrieveRedirect(location.search)
   const [loginTypeConfirmation, setLoginTypeConfirmation] =
     useState<LoginTypeConfirmation>({ open: false, selectedType: undefined })
 
   const mutation = useMutation(convertToOAUTH, {
     onSuccess: (data) => {
-      redirectToOIDCAuth(data.state_string, encodeURIComponent(redirectTo))
+      const loginTypeMsg =
+        data.to_type === "github" ? "Github" : "OpenID Connect"
+      redirectToOIDCAuth(
+        data.to_type,
+        data.state_string,
+        // The redirect on success should be back to the login page with a nice message.
+        // The user should be logged out if this worked.
+        encodeURIComponent(
+          `/login?info=Login type has been changed to ${loginTypeMsg}. Log in again using the new method.`,
+        ),
+      )
     },
   })