Okta Sign-In Widget - The requested feature is not enabled in this environment. Back to sign in

I’m integrating Okta Sign-In Widget into my React Single Page Application (SPA) using the following configuration:

const oktaConfig = {
  clientId: "0oanwm6ik72WLFsRc5d7",
  issuer: "https://dev-48369164.okta.com/oauth2/default",
  redirectUri: "http://localhost:3000/login/callback",
  scopes: ["openid", "profile", "email"],
  pkce: true,
  disableHttpsCheck: true,
};
export default oktaConfig;
import OktaSignIn from "@okta/okta-signin-widget";
import { useEffect, useRef } from "react";
import oktaConfig from "../lib/oktaConfig";

const OktaSignInWidget = ({ onSuccess, onError }) => {
  const widgetRef = useRef();

  useEffect(() => {
    if (!widgetRef.current) {
      return false;
    }

    const widget = new OktaSignIn(oktaConfig);

    widget
      .showSignInToGetTokens({
        el: widgetRef.current,
      })
      .then(onSuccess)
      .catch(onError);

    return () => widget.remove();
  }, [onSuccess, onError]);

  return (
    <div className="container mt-5 mb-5">
      <div ref={widgetRef}></div>
    </div>
  );
};

export default OktaSignInWidget;
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";

import "./App.css";
import Navbar from "./layouts/NavbarAndfooter/Navbar";
import Footer from "./layouts/NavbarAndfooter/Footer";
import HomePage from "./layouts/HomePage/HomePage";
import SearchBooksPage from "./layouts/SearchBooksPage/SearchBooksPage";
import { Redirect, Route, Switch, useHistory } from "react-router-dom";
import BookCheckOutPage from "./layouts/BookCheckOutPage/BookCheckOutPage";
import oktaConfig from "./lib/oktaConfig";
import { toRelativeUrl, OktaAuth } from "@okta/okta-auth-js";
import { Security, LoginCallback } from "@okta/okta-react";
import LoginWidget from "./Auth/LoginWidget";

const oktaAuth = new OktaAuth(oktaConfig);

const App = () => {
  const customAuthHandler = () => {
    history.push("/login");
  };

  const history = useHistory();

  const restoreOriginalUri = async (_okaAuth: any, originalUri: any) => {
    history.replace(toRelativeUrl(originalUri || "/", window.location.origin));
  };

  return (
    <div className="d-flex flex-column min-vh-100">
      <Security
        oktaAuth={oktaAuth}
        restoreOriginalUri={restoreOriginalUri}
        onAuthRequired={customAuthHandler}
      >
        <Navbar />
        <div className="flex-grow-1">
          <Switch>
            <Route path="/" exact>
              <Redirect to="/homepage" />
            </Route>

            <Route path="/homepage">
              <HomePage />
            </Route>

            <Route path="/search">
              <SearchBooksPage />
            </Route>

            <Route path="/checkout/:bookId">
              <BookCheckOutPage />
            </Route>

            <Route
              path="/login"
              render={() => <LoginWidget config={oktaConfig} />}
            />

            <Route path={"/login/callback"} component={LoginCallback} />
          </Switch>
        </div>
        <Footer />
      </Security>
    </div>
  );
};

export default App;

Hi,

Can you try changing the issuer to just “https://dev-48369164.okta.com”. And check if that works

We had the same issue earlier which was resolved by the same - Okta "The Requested feature is not enabled in this enviroment"

Let me know if that works

Still not working, anything else you can suggest to me ??

Hi @prajwal can you confirm you can get tokens outside of the SIW SDK using this tool https://oidcdebugger.com/? In order to get back a code, you’ll need to add the redirect uri as https://oidcdebugger.com/debug in your okta oidc app dashboard.

@prajwal one more thing, can you try adding useClassicEngine: true to your Okta config. Looks like you haven’t upgraded to our new Identity Engine just yet.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.