Implement AWS Amplify Authenticator using React and Ant Design Pro / UmiJS - reactjs

Question

I trying to implement the AWS Amplify Authenticator in Ant Design Pro / UmiJS
In the UmiJS config.ts file I have this configuration:
routes: [
(...){
path: '/',
component: '../layouts/AwsSecurityLayout',
routes: [
{
path: '/',
component: '../layouts/BasicLayout',
authority: ['admin', 'user'],
routes: [
{
path: '/links',
name: 'fb.links',
icon: 'BarsOutlined',
component: './Links',
},(...)
The base component AwsSecurityLayout wraps the routes who will the guard.
Looks like that:
import React from 'react';
import { withAuthenticator } from '#aws-amplify/ui-react';
import { PageLoading } from '#ant-design/pro-layout';
class AwsSecurityLayout extends React.Component {
render() {
const { children } = this.props;
if (!children) {
return <PageLoading />;
}
return children;
}
}
export default withAuthenticator(AwsSecurityLayout);
Went I use the withAuthenticator func the props from UmiJs are not passed to the component, so props and props.child are all ways undefied.
The original file from Ant Design Pro:
import React from 'react';
import { PageLoading } from '#ant-design/pro-layout';
import { Redirect, connect, ConnectProps } from 'umi';
import { stringify } from 'querystring';
import { ConnectState } from '#/models/connect';
import { CurrentUser } from '#/models/user';
interface SecurityLayoutProps extends ConnectProps {
loading?: boolean;
currentUser?: CurrentUser;
}
interface SecurityLayoutState {
isReady: boolean;
}
class SecurityLayout extends React.Component<SecurityLayoutProps, SecurityLayoutState> {
state: SecurityLayoutState = {
isReady: false,
};
componentDidMount() {
this.setState({
isReady: true,
});
const { dispatch } = this.props;
if (dispatch) {
dispatch({
type: 'user/fetchCurrent',
});
}
}
render() {
const { isReady } = this.state;
const { children, loading, currentUser } = this.props;
// You can replace it to your authentication rule (such as check token exists)
// 你可以把它替换成你自己的登录认证规则（比如判断 token 是否存在）
const isLogin = currentUser && currentUser.userid;
const queryString = stringify({
redirect: window.location.href,
});
if ((!isLogin && loading) || !isReady) {
return <PageLoading />;
}
if (!isLogin && window.location.pathname !== '/user/login') {
return <Redirect to={`/user/login?${queryString}`} />;
}
return children;
}
}
export default connect(({ user, loading }: ConnectState) => ({
currentUser: user.currentUser,
loading: loading.models.user,
}))(SecurityLayout);
I Just basically wrap the component using withAuthenticator

Answer 1

I solved using the conditional rendering doc: https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#manage-auth-state-and-conditional-app-rendering
code:
import React from 'react';
import { AmplifyAuthenticator } from '#aws-amplify/ui-react';
import { AuthState, onAuthUIStateChange } from '#aws-amplify/ui-components';
const AwsSecurityLayout: React.FunctionComponent = (props: any | undefined) => {
const [authState, setAuthState] = React.useState<AuthState>();
const [user, setUser] = React.useState<any | undefined>();
React.useEffect(() => {
return onAuthUIStateChange((nextAuthState, authData) => {
setAuthState(nextAuthState);
setUser(authData);
});
}, []);
return authState === AuthState.SignedIn && user ? (
props.children
) : (
// TODO: change style / implement https://github.com/mzohaibqc/antd-amplify-react
<AmplifyAuthenticator />
);
}
export default AwsSecurityLayout;