I’ve been trying to log into my app and thought I had everything correct on my okta account but now I really don’t know if its the way I setup okta or my code. Any help would be greatly appreciated.
Are you getting a generic 400 error or a 400 error that says you have an invalid redirect_uri?
Just a generic 400 right now and ive been stuck on this for like 2 weeks
When I’ve seen this in the past, it’s because of an invalid client ID or secret. What language or framework are you using to create your app?
I think I have the right Client id but I could be wrong. I’m using React. Also not sure what is ok to share here so idk if I should post what I have in my okta app here?
If you’re using React, it’s unlikely there’s any information in your app that’s sensitive. For example, it shouldn’t have a client secret, only an issuer and a client ID.
Could it be a okta widget error maybe I messed something up there @mraible?
Are you working with one of our samples or blog posts? Or can you share your GitHub repo so I can take a look at your code?
I haven’t pushed up in a long time but I can send the screen shots of relevant files here if you’d like or I can just push and send you the link whatever is easier for you
If you can post the code from the file that configures Okta, I should be able to help. For instance, here’s the src/App.js from an app I recently created.
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { LoginCallback, Security } from '@okta/okta-react';
import Home from './Home';
const config = {
issuer: 'https://id.mattraible.com/oauth2/default',
redirect_uri: window.location.origin + '/callback',
client_id: '0oa5683af4tMweYI6357'
};
class App extends Component {
render() {
return (
<Router>
<Security {...config}>
<Route path="/" exact={true} component={Home}/>
<Route path="/callback" component={LoginCallback}/>
</Security>
</Router>
);
}
}
export default App;
Sure I can send that one sec
import React from “react”;
import { Route, useHistory } from “react-router-dom”;
import { Security, SecureRoute, LoginCallback } from “okta-react-bug-fix”;
import config from ‘…/…/utils/config’;
import HomePage from ‘…/HomePage’;
import LoginForm from “…/Authentication/LoginForm”;
import Dashboard from “./dashboard”;
import Navigation from “…/Navigation”;
const AppWithRouterAccess = () => {
const history = useHistory();
const onAuthRequired = () => {
history.push("/login");};
return (
<Security {...config.oidc} onAuthRequired={onAuthRequired} > <div id="content" style={{overflowX:"scroll"}}> <Navigation /> <Route exact path='/' component={HomePage} /> <Route exact path="/implicit/callback" component={LoginCallback} /> <Route exact path="/login" component={LoginForm} /> <SecureRoute exact path="/dashboard" component={Dashboard} /> </div> </Security>);
};
export default AppWithRouterAccess;
const CLIENT_ID = process.env.REACT_APP_CLIENT_ID || “0oaue6cusIYlj75iS4x6”;
const ISSUER =
process.env.REACT_APP_ISSUER || “https://dev-452202.okta.com/oauth2/default”;
export default {
oidc: {
issuer: ISSUER, clientId: CLIENT_ID, redirectUri: window.location.origin + "/implicit/callback", pkce: true, scopes: ["openid", "profile", "email"]}
};
import React, { useEffect } from "react";
import * as OktaSignIn from "@okta/okta-signin-widget";
import "@okta/okta-signin-widget/dist/css/okta-sign-in.min.css";
import config from "../../utils/config";
const LoginForm = () => {
useEffect(() => {
const { pkce, issuer, clientId, redirectUri, scopes } = config.oidc;
const widget = new OktaSignIn({
baseUrl: process.env.REACT_APP_BASEURL,
clientId ,
redirectUri,
language: "en",
brandName: "Job-Saver",
// Overrides default text when using English.
i18n: {
en: {
"primaryauth.title": "Please Sign in to your Job-Saver Account"
}
},
// Changes to widget functionality
authParams: {
pkce,
issuer,
display: "page",
scopes
},
features: {
registration: true, // Enable self-service registration flow
selfServiceUnlock: true, // Will enable unlock in addition to forgotten password
smsRecovery: true, // Enable SMS-based account recovery
callRecovery: true, // Enable voice call-based account recovery
showPasswordToggleOnSignInPage: true
},
idps: [
{ type: "google", id: process.env.REACT_APP_GOOGLE_IPD_ID },
{ type: "linkedin", id: process.env.REACT_APP_LINKEDIN_IPD_ID },
{ type: "facebook", id: process.env.REACT_APP_FACEBOOK_IPD_ID }
],
colors: {
brand: "#08A6C9"
}
});
widget.renderEl(
{ el: "#sign-in-widget" },
() => {
/**
* In this flow, the success handler will not be called because we redirect
* to the Okta org for the authentication workflow.
*/
},
err => {
throw err;
}
);
return () => {
widget.remove();
};
}, []);
return (
<div>
<div
style={{
background: "#F3F8F9",
height: "100%",
paddingTop: "20px",
paddingBottom: "20px"
}}
id="sign-in-widget"
/>
</div>
);
};
export default LoginForm;Those are 3 files I thought maybe relevant also ima also send my env file just in case.
REACT_APP_CLIENT_ID=“0oakra2dvSw3pbo7V4x6”
REACT_APP_ISSUER=“https://dev-452202.okta.com/oauth2/default”
REACT_APP_BASEURL=“https://dev-452202.okta.com”
REACT_APP_GOOGLE_IPD_ID=“0oasou9aqp5vtj1sv4x6”
It looks like you’re using a forked version of our SDK. Is there some bug you encountered that you’re trying to workaround? Do you get an error in your browser’s console that gives you any indication of the problem?