aws-amplify/ui-reac, Is possible to redirect after sign in

after search about this issue the solution is to make your own design for login and register using AUTH.signIn() and Auth.signUp() and you can redirect after.

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:

1. wrap the <router> with <AwsAuthenticator>, a component that you will use to check the and require authentication.
2. At AwsAuthenticator.tsx (or js if you are not using typescript) you will do this:

// @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;