How to edit the oktacallback component

[jsmarino15]

Hello,
Documentation on oktacallbackcomponent states that : " This logic can be customized by copying the component to your own source tree and modified as needed. For example, you may want to capture or display errors differently or provide a helpful link for your users in case they encounter an error on the callback route. The most common error is the user does not have permission to access the application. In this case, they may be able to contact an administrator to obtain access."

This is exactly what I would like to do but I’m unsure which files I need to edite in the node_modules or if there is a better approach

Has anyone ran into the same issue before?

Just trying to display and give the user options when I get the error “user does not have permission to access the application”

Thanks

[andrea]

Which SDK are you using, is it the React SDK which supports creating a custom callback component?

[jsmarino15]

Sorry should have mentioned that it is the angular sdk

[alisaduncan]

Hey there! To create your callback component, the best way is to copy the code from the implementation in the SDK found in this file into a component you create within your project and edit it to your needs. In the route definition, you’ll add your custom component as the component for the callback route, for example:

const routes: Routes = [
  { path: 'login/callback', component: MyCustomCallbackComponent },
  ... remaining routes
];

Adding customization ability for the callback component in the Angular SDK is something we’re looking into, but it isn’t available yet.

Let us know how it goes and if you have any questions!

[jsmarino15]

Hello!

Thanks for the reply.

I started working on that approach and I’m getting the following error.

These are my imports (I copied pasted the contents of the okta.config on the repo into my own okta.config file

[alisaduncan]

You’ll need to update your imports to import from the okta-angular module (unless your setup differs from what I imagine).

You’ll need to change LOC 3 to

import { OKTA_CONFIG, OktaConfig, OKTA_AUTH } from '@okta/okta-angular';

I typed that out without trying in an IDE, so please shout out if you run into any troubles!

[jsmarino15]

Hi, I initially had it set up that way, however I’m still getting the same error.
Are there any extra files I need to import to my program? Pasting here my current set up of the callback component just in case.

[jsmarino15]

import { Component, OnInit, Optional, Injector, Inject } from ‘@angular/core’;
import { OktaAuth } from ‘@okta/okta-auth-js’;
import { OktaAuthGuard } from ‘@okta/okta-angular’;
import { OKTA_CONFIG, OktaConfig, OKTA_AUTH } from ‘@okta/okta-angular’;

[jsmarino15]

import { Component, OnInit, Optional, Injector, Inject } from ‘@angular/core’;
import { OktaAuth } from ‘@okta/okta-auth-js’;
import { OktaAuthGuard } from ‘@okta/okta-angular’;
import { OKTA_CONFIG, OktaConfig, OKTA_AUTH } from ‘@okta/okta-angular’;

[erik]

What versions of the SDK are you using?
authClient.idx.isInteractionRequiredError(err) was added around okta-auth-js 6.7.

[jsmarino15]

I still haven’t been able to get it working.
I have these two installed:

“@okta/okta-angular”: “^6.1.0”,
“@okta/okta-auth-js”: “7.2.0”

[jsmarino15]

Fyi, I was able to make it work. I commented out the portion of the code that was flagging it as an error. I might be missing something by doing that, but the code works after doing so. Im rolling with it.

const isInteractionRequiredError =
// this.oktaAuth.isInteractionRequiredError ||
this.oktaAuth.idx.isInteractionRequiredError;

thank you all so much for the help