1

im using Okta on my React application to login,the issue that i have is that okta authenticates correctly but it doesnt take me to the corresponding landing page,it redirects me to the login page again

Im using index.js to add my okta code and config.js to add my okta details to login

INDEX.JS

import React from "react";
import ReactDOM from "react-dom/client";
import { Route, Switch, Redirect, BrowserRouter } from "react-router-dom";
import AuthLayout from "layouts/Auth.js";
import AdminLayout from "layouts/Admin.js";
import config from "./config";
import { LoginCallback, SecureRoute, Security } from "@okta/okta-react";
import { OktaAuth, toRelativeUrl } from "@okta/okta-auth-js";
import "bootstrap/dist/css/bootstrap.css";
import "assets/scss/paper-dashboard.scss?v=1.3.1";
import "assets/demo/demo.css";
import "perfect-scrollbar/css/perfect-scrollbar.css";

const oktaAuth = new OktaAuth(config);
const root = ReactDOM.createRoot(document.getElementById("root"));
const restoreOriginalUri = async (_oktaAuth, originalUri) => {
  window.location.replace(
    toRelativeUrl(originalUri || "/", window.location.origin)
  );
};
root.render(
    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
       <BrowserRouter>
      <Switch>
        <Route path="/auth" render={(props) => <AuthLayout {...props} />} />
        <SecureRoute path="/admin/dashboard" render={(props) => <AdminLayout {...props} />}/>
        <SecureRoute 
          path="/admin"
          render={(props) => <AdminLayout {...props} />}
        />
        <Redirect to="/auth/Login" />
      </Switch>
      </BrowserRouter>
    </Security>
);

*CONFIG.JS

export default {
    issuer: "https://dev-34612664.okta.com",
    clientId: "0oa70pa7ykqLn9jgj5d7",
    redirectUri: window.location.origin + "/login/callback",
};

Im also using this code to add my routes

const routes = [
  {
    path: "/dashboard",
    name: "Dashboard",
    icon: "nc-icon nc-bank",
    component: Dashboard,
    layout: "/admin"
  },
      {
        path: "/login",  
         component: Login,
          layout: "/auth",
          name: "",
          mini: "",
        },
Lyrics _ rebeca
  • 27
  • 3
  • Thanks, i just changed the code – Lyrics _ rebeca Nov 03 '22 at 16:00
  • 1
    Are you basically asking how to implement [protected routes](/a/66289280/8690857) where you need to redirect back to the original route being accessed or do you have some other issue you need help with? *What* exactly is redirecting user back to the login route? Can you include a set of exact reproduction steps to cause the issue? – Drew Reese Nov 03 '22 at 16:25
  • The problem is that okta logins correctly but after the authentication it doest take me to the correct page , is suppose to take me to "/admin/dashboard" but it takes me back to "/auth/Login" after the authentication with okta – Lyrics _ rebeca Nov 03 '22 at 16:32
  • So where do those values come from and where are they used? Can you include ***all*** relevant code you are working with and have an issue using as part of your [mcve]? – Drew Reese Nov 03 '22 at 16:33
  • Thats all im using that may be the issue also, im using INDEX.JS to add my main code and CONFIG.JS to add my okta details, also i added my routes – Lyrics _ rebeca Nov 03 '22 at 16:58
  • 1
    This doesn't appear to be a [mcve]. There isn't any `"/auth/login"` route being rendered. It's unclear where any of the authentication flow begins (*to know where to send a user back to*). Is this code that is used in the `AuthLayout` component? – Drew Reese Nov 03 '22 at 17:05
  • im using in the render in index.js But yes you are right is not clear i can see that now – Lyrics _ rebeca Nov 03 '22 at 17:17

0 Answers0