DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Jayant Tripathi
Jayant Tripathi

Posted on

useLocation() and useHistory() do not change, always have the same values

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.

Image description

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

🌚 Life is too short to browse without dark mode