Reputation: 33
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
Upvotes: 0
Views: 45