400 bad request when login - redirection problem

[sabrinaBinaa89]

Hi,
I have a problem when I try to log in. I get bad requests with message

## Erreur : Le paramètre 'redirect_uri' doit être un URI de redirection de connexion dans les paramètres de l'application cliente : https://dev-*******-admin.okta.com/admin/app/oidc_client/instance/***********#tab-general

I use :
“@okta/okta-angular”: “^6.4.0”,
“@okta/okta-auth-js”: “^7.8.0”,
angular 17
node 18.13.0
typseScript 5.2.2

Part of my code is:

AppRoutingModule:

@NgModule({
    imports: [
        RouterModule.forRoot([ {
                path: 'login/callback',
                component: OktaCallbackComponent,
              },

AppModule

import {
  OKTA_CONFIG,
  OktaAuthModule,
  OktaConfig
} from '@okta/okta-angular';
import { OktaAuth } from '@okta/okta-auth-js';

const authConfig = {
  clientId: '*****',
  issuer: 'https://dev-*****.okta.com/oauth2/default', 
  redirectUri: 'http://localhost:4200/login/callback',
  scopes: ['openid', 'profile', 'email','groups'],
  pkce: true,
  testing: {
    disableHttpsCheck: false
  },
  resourceServer: {
    basicUrl: 'http://localhost:8084/api',
 
  }
}
const oktaAuth = new OktaAuth(authConfig);
const moduleConfig: OktaConfig = { oktaAuth };
@NgModule({
    declarations: [
        AppComponent, NotfoundComponent
    ],
    imports: [
      .......
        OktaAuthModule.forRoot(moduleConfig)
    ],
    providers: [
      { 
        provide: OKTA_CONFIG, 
        useValue: { oktaAuth } 
      },
        { provide: LocationStrategy, useClass: HashLocationStrategy }
      ...
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent (ts)

import { OktaAuthStateService, OKTA_AUTH } from '@okta/okta-angular';
import OktaAuth from '@okta/okta-auth-js';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  
  isAuthenticated: boolean;
  constructor( @Inject(OKTA_AUTH) public oktaAuth: OktaAuth,  public authStateService: OktaAuthStateService, public router: Router) { 
    this.authStateService.authState$.subscribe((authState) => {
      this.isAuthenticated = !!authState.isAuthenticated;
    });
  }
  async ngOnInit() {
  
  }
  
  async login() {
    await this.oktaAuth.signInWithRedirect();
  }

  async logout() {
    await this.oktaAuth.signOut();
  }

 }

appComponent (html)

    <a class="item" *ngIf="!isAuthenticated" (click)="oktaAuth.login('/')">Login</a>
    {{isAuthenticated}}
   <div *ngIf="isAuthenticated" >
   <router-outlet></router-outlet>
   </div> 

when I access my app with http://localhost:4200 , I show a login button, but before I click it , I will be redirected to

(https://dev-xxxx.okta.com/oauth2/default/v1/authorize?client_id=xxxx&code_challenge=xxxx&code_challenge_method=S256&nonce=xxxx&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Fauthorization-code%2Fcallback&response_type=code&state=xxxx&scope=openid%20profile%20email%20groups)

with 400 bad request!!
The Okta login page is not displayed!
Can you please help me correct my code to obtain the login okta page when I click on “log in” button?
Note that I use the same config. , especially the redirect uri when I create Okta application
Thank you

[cosmin.i]

Hello @sabrinaBinaa89,
the same redirect_uri issue is also documented in this support article.

This specific redirect_uri error will be returned from the /authorize endpoint (generated by the SDK), only when the redirect_uri parameter specified in the /authorize request is not the exact same with the sign in redirect uri value from the OIDC application.

To fix this error:
-Please check if the ClientId specified in the authConfig object, is associated with the correct OIDC client in Okta. ( you can use the client ID value directly in Okta admin dashboard → Applications, to verify)

-After accessing the correct OIDC application in Okta, please add the redirect_uri value (in this case it’s: “http://localhost:4200/login/callback” ) to the “Sign-In redirect URIs” section.

[sabrinaBinaa89]

@cosmin.i

OIDC application

Thank you for your answer,
I aleardy checked that I use the some clientId in both: authConfig & OIDC application, also the redirect_uri id aleardy added to sign_in URIs:

I added two sign-in URIs:

I followed the instructions in the link provided but I still have a problem

the message error is not the same, I think is a problem of roles!

[sabrinaBinaa89]

The problem of uri_redirection and scope are corrected!
But , I have another problem which is : after I access to A=“http://localhost:4200” I will be redirected to B=“http://localhost:4200/authorization-code/callback…” with 302 code status (temporary redirect) :

think that the calls of the 2 URIs (A & B ) are repeated in a loop without displayed the login page (the standard login page of okta) !

[sabrinaBinaa89]

Hi,
I noticed that the URI “http://localhost:4200/login/callback?code=…” is called in a loop with a new code for every call => in the URI bar we have once ‘http://localhost:4200/#/’ and another time “http://localhost:4200/login/callback?code=…” in loop

I aleardy have a problem to display the standard login page of okta
Any one can help me please

[sabrinaBinaa89]

the problem is resolved when I create a new app. with the type Single Page App (SPA) instead of web && Grant type = refresh token