argo-cd

1
import React, {useEffect, useState} from 'react';
2
import {RouteComponentProps} from 'react-router';
3
import {services} from '../../shared/services';
4
import {PKCECodeVerifier, PKCELoginError, getPKCERedirectURI, pkceCallback} from './utils';
5

6
import './pkce-verify.scss';
7

8
export const PKCEVerification = (props: RouteComponentProps<any>) => {
9
    const [loading, setLoading] = useState(true);
10
    const [error, setError] = useState<PKCELoginError | Error>();
11

12
    useEffect(() => {
13
        setLoading(true);
14
        services.authService
15
            .settings()
16
            .then(authSettings => pkceCallback(props.location.search, authSettings.oidcConfig, getPKCERedirectURI().toString()))
17
            .catch(err => setError(err))
18
            .finally(() => {
19
                setLoading(false);
20
                PKCECodeVerifier.unset();
21
            });
22
    }, [props.location]);
23

24
    if (loading) {
25
        return <div className='pkce-verify__container'>Processing...</div>;
26
    }
27

28
    if (error) {
29
        return (
30
            <div className='pkce-verify__container'>
31
                <div>
32
                    <h3>Error occurred: </h3>
33
                    <p>{error?.message || JSON.stringify(error)}</p>
34
                    <a href='/login'>Try to Login again</a>
35
                </div>
36
            </div>
37
        );
38
    }
39

40
    return (
41
        <div className='pkce-verify__container'>
42
            success. if you are not being redirected automatically please &nbsp;<a href='/applications'>click here</a>
43
        </div>
44
    );
45
};
46