I am using "react-router": "^5.1.0", "react-router-dom": "5.1.0". Login component gets loaded but the history and location object do not change always remain the same, after the redirect or if you load any other component.
import React from "react";
import { ThemeProvider } from "styled-components";
import { theme } from "./theme-default";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import { GlobalStyle } from "./themes";
import { Security } from '@okta/okta-react';
import { OktaAuth } from "@okta/okta-auth-js";
import { FeeSitePageHeader } from "./app/fee--site-page-header";
import { FeeSitePageFooter } from "./app/fee-site-page-footer";
import Dashboard from "./app/Dashboard/Dashboard";
import Logout from "./app/Logout/Logout";
import Login from "./app/Login/Login";
function App() {
const config = {
issuer: 'https://dev-95779092.okta.com/',
clientId: '****',
redirectUri: window.location.origin + '/?redirect_url=/login/callback'
};
const authClient = new OktaAuth(config);
function restoreOriginalUri() {
console.log(restoreOriginalUri);
};
return (
<ThemeProvider theme={theme}>
<GlobalStyle />
<Router >
<Security oktaAuth={authClient} restoreOriginalUri={restoreOriginalUri}>
<FeeSitePageHeader />
<Switch>
<Route path="/" exact component={Login} />
<Route path="/dashboard" component={Dashboard}/>
<Route path="/logout" component={Logout}/>
</Switch>
<FeeSitePageFooter />
</Security>
</Router>
</ThemeProvider>
);
}
export default App;
This is the Login Component.
import React from 'react';
import { useOktaAuth } from '@okta/okta-react';
import {TextInput,Field, Checkbox} from "./atom";
import { useLocation } from 'react-router';
import { useHistory } from 'react-router';
import * as Styled from "./Login.styled";
function Login(){
const { authState, oktaAuth } = useOktaAuth();
const location = useLocation();
const history = useHistory();
const [username, setUsername]=React.useState("");
const [password, setPassword]=React.useState("");
console.log(location);
console.log(history);
React.useEffect(() => {
console.log("React UseEffects");
if (history.location.search?.includes('redirect_url=/login/callback')) {
history.push('/#/dashboard');
}
}, [history,location])
function handleFormSubmission(){
oktaAuth.signInWithRedirect();
console.log(oktaAuth,authState);
}
function chgUsername(e:any){
setUsername(e.target.value);
}
function chgPassword(e:any){
setPassword(e.target.value);
}
return(
<Styled.LoginFormWrapper>
<Styled.Title>
</Styled.Title>
<Styled.FieldWrapper>
<Field >
{props => (
<TextInput
name="username"
size={27}
placeholder="username"
value={username}
onChange={chgUsername}
/>
)}
</Field>
</Styled.FieldWrapper>
<Styled.FieldWrapper>
<Field >
{props => (
<TextInput
name="password"
size={27}
placeholder="Password"
type="password"
value={password}
onChange={chgPassword}
/>
)}
</Field>
</Styled.FieldWrapper>
<Styled.RememberMe>
<Checkbox
label="Remember me"
title="Remember me"
/>
</Styled.RememberMe>
<Styled.LoginButton
onClick={handleFormSubmission}
data-testid="login-form-login-btn" >
Log In
</Styled.LoginButton>
</Styled.LoginFormWrapper>
);
}
export default Login;
when the application loads Login component is rendered then onclick OKTA is used to authenticate the user and redirects to "localhost:8080/?redirect_url=/login/callback" hence in login (use effects) I am redirecting to dashboard when authentication is successful. But some reason location object is not changing
Latest comments (0)