@@ -6,16 +6,21 @@ import {
66} from "api/api" ;
77import { usePermissions } from "hooks" ;
88import { type FC } from "react" ;
9- import { useParams } from "react-router-dom" ;
9+ import { useParams , useSearchParams } from "react-router-dom" ;
1010import ExternalAuthPageView from "./ExternalAuthPageView" ;
1111import { ApiErrorResponse } from "api/errors" ;
1212import { isAxiosError } from "axios" ;
13+ import Box from "@mui/material/Box" ;
14+ import Button from "@mui/material/Button" ;
15+ import { SignInLayout } from "components/SignInLayout/SignInLayout" ;
16+ import { Welcome } from "components/Welcome/Welcome" ;
1317
1418const ExternalAuthPage :FC = ( ) => {
1519const { provider} = useParams ( ) ;
1620if ( ! provider ) {
1721throw new Error ( "provider must exist" ) ;
1822}
23+ const [ searchParams ] = useSearchParams ( ) ;
1924const permissions = usePermissions ( ) ;
2025const queryClient = useQueryClient ( ) ;
2126const getExternalAuthProviderQuery = useQuery ( {
@@ -72,6 +77,35 @@ const ExternalAuthPage: FC = () => {
7277! getExternalAuthProviderQuery . data . authenticated &&
7378! getExternalAuthProviderQuery . data . device
7479) {
80+ const redirectedParam = searchParams ?. get ( "redirected" ) ;
81+ if ( redirectedParam && redirectedParam . toLowerCase ( ) === "true" ) {
82+ // The auth flow redirected the user here. If we redirect back to the
83+ // callback, that resets the flow and we'll end up in an infinite loop.
84+ // So instead, show an error, as the user expects to be authenticated at
85+ // this point.
86+ // TODO: Unsure what to do about the device auth flow, should we also
87+ // show an error there?
88+ return (
89+ < SignInLayout >
90+ < Welcome message = "Failed to validate oauth access token" />
91+ < Box textAlign = "center" >
92+ Attempted to validate the user's oauth access token from the
93+ authentication flow. This situation may occur as a result of an
94+ external authentication provider misconfiguration. Verify the
95+ external authentication validation URL is accurately configured.
96+ </ Box >
97+ < br />
98+ < Button
99+ onClick = { ( ) => {
100+ // Redirect to the auth flow again. *crosses fingers*
101+ window . location . href = `/external-auth/${ provider } ;
102+ } }
103+ >
104+ Retry
105+ </ Button >
106+ </ SignInLayout >
107+ ) ;
108+ }
75109window . location . href = `/external-auth/${ provider } ;
76110return null ;
77111}