Hello I'm trying to redirect and change my path after sign in using AWS-amplify and with react-dom
I need after user login redirect them to localhost/main
main because its sill in localhost/
If anyone have an idea can help me thank you My Code:
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Amplify from "aws-amplify";
import {
AmplifyAuthenticator,
AmplifySignUp,
} from "@aws-amplify/ui-react";
import { AuthState, onAuthUIStateChange } from "@aws-amplify/ui-components";
import awsconfig from "./aws-exports";
import Main from "./main";
Amplify.configure(awsconfig);
const AuthStateApp = () => {
const [authState, setAuthState] = React.useState();
const [user, setUser] = React.useState();
React.useEffect(() => {
return onAuthUIStateChange((nextAuthState, authData) => {
setAuthState(nextAuthState);
setUser(authData);
});
}, []);
return authState === AuthState.SignedIn && user ? (
<Router>
<Switch>
<Route path="/main">
<Main />
</Route>
</Switch>
</Router>
) : (
<AmplifyAuthenticator>
<AmplifySignUp
slot="sign-up"
formFields={[
{ type: "username" },
{ type: "password" },
{ type: "email" },
]}
/>
</AmplifyAuthenticator>
);
};
export default AuthStateApp;
在搜索此问题后,解决方案是使用AUTH.signIn()
和Auth.signUp()
制作您自己的登录和注册设计,然后您可以重定向。
I'm using angular but I think it could be similar
onAuthUIStateChange((authState, authData) => {
console.log('LoginPage', authState, authData);
if (this.authState == AuthState.SignedIn) {
this.router.navigate(['']);
}
});
I usually do like this:
<router>
with <AwsAuthenticator>
, a component that you will use to check the and require authentication.// @ts-ignore
import {Authenticator} from 'aws-amplify-react-native';
import React, {ReactNode, useState} from 'react';
import {signUpConfig} from '@app/components/Authentication/SignUpForm.config';
interface AwsAuthenticatorProps {
children: ReactNode;
}
export const AwsAuthenticator = ({children}: AwsAuthenticatorProps) => {
const [loggedIn, setLoggedIn] = useState<boolean>(false);
// possible states: signIn | signedIn | signedOut
const handleAuthStateChange = (authState: string) =>
authState === 'signedIn' ? setLoggedIn(true) : setLoggedIn(false);
return loggedIn ? (
<>{children}</>
) : (
<Authenticator
usernameAttributes="email"
signUpConfig={signUpConfig}
onStateChange={handleAuthStateChange}
/>
);
};
This worked for me, but it will redirect you to /main everytime you refresh the page, not only after login.
Just import the react-router-dom hook useNavigate, set it to a variable and then call it inside the useEffect
See it implemented in your code
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Amplify from "aws-amplify";
import {
AmplifyAuthenticator,
AmplifySignUp,
} from "@aws-amplify/ui-react";
import { AuthState, onAuthUIStateChange } from "@aws-amplify/ui-components";
import awsconfig from "./aws-exports";
import Main from "./main";
import { useNavigate } from "react-router-dom";
Amplify.configure(awsconfig);
const AuthStateApp = () => {
const [authState, setAuthState] = React.useState();
const [user, setUser] = React.useState();
const navigate = useNavigate();
React.useEffect(() => {
return onAuthUIStateChange((nextAuthState, authData) => {
setAuthState(nextAuthState);
setUser(authData);
navigate("/main");
});
}, []);
return authState === AuthState.SignedIn && user ? (
<Router>
<Switch>
<Route path="/main">
<Main />
</Route>
</Switch>
</Router>
) : (
<AmplifyAuthenticator>
<AmplifySignUp
slot="sign-up"
formFields={[
{ type: "username" },
{ type: "password" },
{ type: "email" },
]}
/>
</AmplifyAuthenticator>
);
};
export default AuthStateApp;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.