do hai
do hai

Reputation: 33

Okta Login Redirects to Okta Dashboard Instead of Application Home Page

I am just starting to learn about authentication with Okta. When I log in with Okta in my application, it redirects to Okta's dashboard instead of my application's home page. I believe both the front-end and backend have successfully authenticated and returned a token. However, I think I might be missing a setup step in the Okta dashboard, which is causing the redirect to Okta's dashboard instead of my home page

this is my front-end code:

"use client";

import userAuthCookie from "@/browsers/cookies/userAuthCookie";
import userAuthLocalStorage from "@/browsers/local-storage/userAuthLocalStorage";
import { AUTH_PROVIDER_TYPE } from "@/constants/auth";
import { API_BASE_URL } from "@/constants/environments";
import { oktaSDK, oktaSettings } from "@/constants/okta";
import ROUTES from "@/constants/paths";
import executeAsync from "@/helpers/async-helpers/executeAsync";
import apiClient from "@/http/instances/apiClient";
import type { UserAuthData } from "@/types";
import { useEffect, useState } from "react";

const storeAuthData = (data: UserAuthData) => {
  userAuthCookie.set(data);
  userAuthLocalStorage.set(data, true);
};

const navigateToHome = () => {
  if (typeof window === "undefined") return;
  window.location.replace(ROUTES.home);
};

const navigateToLoginPage = () => {
  if (typeof window === "undefined") return;
  window.location.replace(ROUTES.login);
};

export default function FetchOktaTokenAndRedirect({
  code,
  state,
}: {
  code?: string;
  state?: string;
}) {
  const [isComponentMounted, setComponentMounted] = useState(false);

  useEffect(() => {
    if (!isComponentMounted) {
      setComponentMounted(true);
      return;
    }
    if (!code || !state) return;

    const retrieveOktaAuthAndStoreData = async () => {
      const [prepareError, tokenSettings] = await executeAsync(
        oktaSDK.token.prepareTokenParams()
      );

      if (prepareError || !tokenSettings) {
        return;
      }

      const [tokenError, authResponse] = await executeAsync(
        apiClient.post(`${API_BASE_URL}/login-with-okta`, {
          redirect_uri: oktaSettings.oidc.redirectUri,
          code_verifier: tokenSettings.codeVerifier,
          code: code,
        })
      );

      if (tokenError || !authResponse?.data?.data?.token) {
        navigateToLoginPage();
        return;
      }

      const userAuthData: UserAuthData = {
        provider: AUTH_PROVIDER_TYPE.OKTA,
        ssoAccessToken: "",
        accessToken: authResponse?.data?.data?.token,
        refreshToken: "",
        expiredIn: 1924556038,
      };

      storeAuthData(userAuthData);
      navigateToHome();
    };

    retrieveOktaAuthAndStoreData();
  }, [isComponentMounted, code, state]);

  return <></>;
}

This is how I set it up in the Okta dashboard enter image description here

enter image description here

enter image description here

Upvotes: 0

Views: 45

Answers (0)

Related Questions