Hi,
It would be useful if you made the methods in the Auth class available without having to use the withAuth HOC.

This is useful when you need to use the access token outside of React. For example when using Apollo Client.

Thanks

I updated my Angular PWA + Spring Boot app today to use Angular 5.

https://developer.okta.com/blog/2017/05/09/progressive-web-applications-with-angular-and-spring-boot

Next, I tried to integrate the latest version of otka-spring-boot-starter and "@okta/okta-angular": "0.0.8". I followed the instructions at https://developer.okta.com/quickstart/angular/default-example, but I can't get the login screen to hide the login button.

Steps to Reproduce

git clone [email protected]:oktadeveloper/spring-boot-angular-pwa-example.git 
git checkout okta-angular-sdk
cd spring-boot-angular-pwa-example/client
npm i
ng serve

You can change the info in src/app/app.module.ts to match your org, or hit me up on Slack and I can provide you some credentials.

Hi, I'm getting this error message from time to time:

(node:10572) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): RequestError: Request timed out

I'm not sure what's causing it. Can you help me out on this?

This is my code:

oidc.on('ready', () => {
  app.listen(3000, () => console.log('App Started!'));
});

Is there a reason why getAccessToken is async? as far as I see there is nothing async going on in the function. Would you accept a PR?

Thanks.

The published package is lacking the dist folder.

Since the main resolves to the dist folder the package cannot be used anymore.

The ignore is being picked up from your .gitignore, you'd need a separate .npmignore to unignore it for publishing purposes.

See https://docs.npmjs.com/misc/developers#keeping-files-out-of-your-package

PassportJS has a failureRedirect route which can be provided by client to show a custom error page.

The case i've is if you hit authorization-code/callback?error=access_denied if will just show Unauthorized and not an easy way to override this error page or show a page.

I propose, provided the clients ability to provide failureRedirect for passport similar to successReturnToOrRedirect.

When attempting to create a production build with react it fails and I get this error:

Failed to minify the code from this file:

./node_modules/@okta/okta-react/dist/Auth.js:54

It's suggested here that the package be published pre-compiled.

This can be useful when using HttpClient in Angular 4.3+:

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { OktaAuthService } from '@okta/okta-angular';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private oktaAuth: OktaAuthService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    if (request.url.indexOf('localhost') > -1) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${this.oktaAuth.getAccessToken().accessToken}`
        }
      });
    }

    return next.handle(request);
  }
}

Of course, this should be improved to allow whitelisting of URLs and check if the user is authenticated first. The whitelisting is necessary because I've found some APIs will fail (e.g., Giphy) if there's an Authorization header.

It'll also need to registered as a module in a provider.

  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true
  }],

I am getting access tokens from https://company.okta.com/oauth2/v1/authorize, with something like:

https://company.okta.com/oauth2/v1/authorize?client_id=<clientId>&redirect_uri=<callbackUrl>&response_type=id_token%20token&scope=openid&state=123&nonce=4

However when I try to verify the access_token that comes back, I am getting SigningKeyNotFoundError: Unable to find a signing key that matches ...

I can't seem to figure out whats wrong. When I call the /oauth2/v1/introspect endpoint directly, the access_token comes back as being valid.

Here's my config for OktaJwtVerifier

const oktaJwtVerifier = new OktaJwtVerifier({
  issuer: Config.OKTA_ISSUER, // https://company.okta.com/oauth2
  clientId: Config.OKTA_CLIENT_ID,
  assertClaims: {}
});

I created a React application with TypeScript and Create React App:

npm install -g create-react-app
create-react-app my-app --scripts-version=react-scripts-ts

When I try to import Security and ImplicitCallback in src/App.tsx, I get the following error:

(3,22): error TS7016: Could not find a declaration file for module '@okta/okta-react'. 
'/Users/mraible/dev/okta/spring-boot-react-example/client/node_modules/@okta/okta-react/dist/index.js' 
implicitly has an 'any' type.
  Try `npm install @types/@okta/okta-react` if it exists or add a new declaration (.d.ts) file   
  containing `declare module '@okta/okta-react';`

I went through the React Quickstart this morning and found a few issues:

1. In the Configuration section, it says redirectUri:

const config = {
  issuer: 'https://dev-158606.oktapreview.com/oauth2/default',
  redirectUri: window.location.origin + '/implicit/callback',
  clientId: '{clientId}'
}

While in the "Update your App.js" section, it says redirect_uri. These variable names should be consistent.

2. There are unused imports:

./src/Home.js
  Line 2:  'Link' is defined but never used  no-unused-vars

webpackHotDevClient.js:136 ./src/App.js
  Line 4:  'SecureRoute' is defined but never used  no-unused-vars

3. Logout doesn't work. Even after I added http://localhost:3000 as a Logout Redirect URI.

Failed to load https://dev-158606.oktapreview.com/api/v1/sessions/me: Response to preflight 
request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on 
the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I was able to fix this after adding http://localhost:3000 as a Trusted Origin. I'm guessing this won't happen for people creating a new app, but I was using an OIDC app that was configured for Angular (localhost:4200). It be good to note this issue in case others stumble upon it.

4. I was unable to get the Quickstart example working when using TypeScript with React. I created a new project with create-react-app as follows:

create-react-app my-app --scripts-version=react-scripts-ts

Then added Okta and react-router, but I still get the following error in my console on startup.

(1,8): error TS1192: Module '"/Users/mraible/react-app-ts/node_modules/@types/react/index"' has no default export.

In my browser's console, I see other errors:

index.js:2177 Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`.
    in Router (created by App)
    in App
__stack_frame_overlay_proxy_console__ @ index.js:2177
printWarning @ warning.js:33
warning @ warning.js:57
checkPropTypes @ checkPropTypes.js:52
validatePropTypes @ react.development.js:1156
createElementWithValidation @ react.development.js:1250
./src/App.tsx.App.render @ App.tsx:18
finishClassComponent @ react-dom.development.js:7882
updateClassComponent @ react-dom.development.js:7859
beginWork @ react-dom.development.js:8233
performUnitOfWork @ react-dom.development.js:10215
workLoop @ react-dom.development.js:10279
callCallback @ react-dom.development.js:540
invokeGuardedCallbackDev @ react-dom.development.js:579
invokeGuardedCallback @ react-dom.development.js:436
renderRoot @ react-dom.development.js:10357
performWorkOnRoot @ react-dom.development.js:10963
performWork @ react-dom.development.js:10916
requestWork @ react-dom.development.js:10832
scheduleWorkImpl @ react-dom.development.js:10715
scheduleWork @ react-dom.development.js:10677
scheduleTopLevelUpdate @ react-dom.development.js:11140
updateContainer @ react-dom.development.js:11178
(anonymous) @ react-dom.development.js:15190
unbatchedUpdates @ react-dom.development.js:11049
renderSubtreeIntoContainer @ react-dom.development.js:15189
render @ react-dom.development.js:15254
./src/index.tsx @ index.tsx:7
__webpack_require__ @ bootstrap a3e43b22522b5d371760:669
fn @ bootstrap a3e43b22522b5d371760:87
0 @ registerServiceWorker.ts:114
__webpack_require__ @ bootstrap a3e43b22522b5d371760:669
(anonymous) @ bootstrap a3e43b22522b5d371760:715
(anonymous) @ bundle.js:719
Router.js:31 Uncaught TypeError: Cannot read property 'location' of undefined
    at new Router (Router.js:31)

I am trying to authenticate a user. Upon Authentication, It calls ImplicitCallback and gives this error.

I have defined my routes like this

<Route path="/" exact={true} component={HomePage} />
<SecureRoute path="/profile" component={ProfilePage} />
<Route path="/login" render={() => <LoginPage baseUrl={config.url} />} />
<Route path="/register" component={RegistrationForm} />
<Route path="/implicit/callback" component={ImplicitCallback} />

and remainging configuration

const auth = new Auth({
    history,
    issuer: config.issuer,
    client_id: config.client_id,
    redirect_uri: config.redirect_uri,
    onAuthRequired: ({history}) => history.push('/login')
});

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Security auth={auth}>
                <App />
            </Security>
        </Router>
    </Provider>,
    document.getElementById('root')
);

Please let me know what is wrong with it?

I am seeing following error from time to time. It works sometimes and app starts, but most of the times I see this error within 2-3 seconds of starting the app.

Is there a way to increase the timeout?

Unable to configure ExpressOIDC { RequestError: Request timed out
    at timeoutFn (.../node_modules/got/index.js:285:53)
    at asPromise (.../node_modules/got/index.js:355:18)
    at got (.../node_modules/got/index.js:578:10)
    at Function.got.(anonymous function) [as get] (.../node_modules/got/index.js:596:31)
    at Object.get (.../node_modules/openid-client/lib/http.js:15:14)
    at Function.discover (.../node_modules/openid-client/lib/issuer.js:192:28)
    at Object.oidcUtil.createClient.context [as createClient] (.../node_modules/@okta/oidc-middleware/src/oidcUtil.js:30:17)
    at new ExpressOIDC (.../node_modules/@okta/oidc-middleware/src/ExpressOIDC.js:109:14)
    at Object.<anonymous> (.../src/app.js:20:14)
    at Module._compile (module.js:660:30)
    at loader (.../node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (.../node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
  name: 'RequestError',
  code: 'ETIMEDOUT',
  host: '<DOMAIN>.oktapreview.com',
  hostname: '<DOMAIN>.oktapreview.com',
  method: 'GET',
  path: '/oauth2/default/.well-known/openid-configuration',
  protocol: 'https:',
  url: 'https://<DOMAIN>.oktapreview.com/oauth2/default/.well-known/openid-configuration' }

Following is the code of my app

import express from 'express';
import session from 'express-session';
import {ExpressOIDC} from '@okta/oidc-middleware';
import {APP_SECRET, PORT} from './config/appConfig';

const app = express();

app.use(session({
  secret: APP_SECRET,
  resave: true,
  saveUninitialized: false,
}));

const oidc = new ExpressOIDC({
  issuer: 'https://<DOMAIN>.oktapreview.com/oauth2/default',
  client_id: '<CLIENT_ID>',
  client_secret: '<CLIENT_SECRET>',
  redirect_uri: 'http://localhost:3000/authorization-code/callback',
  scope: 'openid profile',
});
app.use(oidc.router);

app.get('/', (req, res) => {
  if (req.userinfo) {
    console.log(req.userinfo);
    res.send(`Hello ${req.userinfo.name}! <a href="logout">Logout</a>`);
  } else {
    res.send('Please <a href="/login">login</a>');
  }
});

app.get('/protected', oidc.ensureAuthenticated(), (req, res) => {
  res.send('Top Secret');
});

app.get('/logout', (req, res) => {
  req.logout();
  res.redirect('/');
});

oidc.on('ready', () => {
  app.listen(PORT, () => console.log('App Started'));
});

oidc.on('error', (err) => {
  console.log('Unable to configure ExpressOIDC', err);
});

This is the entire error message:

Error: Unknown authentication strategy "oidc"
    at attempt (C:\wamp64\www\RVSlinkyLinks\node_modules\passport\lib\middleware\authenticate.js:173:37)
    at authenticate (C:\wamp64\www\RVSlinkyLinks\node_modules\passport\lib\middleware\authenticate.js:349:7)
    at C:\wamp64\www\RVSlinkyLinks\node_modules\@okta\oidc-middleware\src\connectUtil.js:74:28
    at Layer.handle [as handle_request] (C:\wamp64\www\RVSlinkyLinks\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\wamp64\www\RVSlinkyLinks\node_modules\express\lib\router\index.js:317:13)
    at C:\wamp64\www\RVSlinkyLinks\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\wamp64\www\RVSlinkyLinks\node_modules\express\lib\router\index.js:335:12)
    at next (C:\wamp64\www\RVSlinkyLinks\node_modules\express\lib\router\index.js:275:10)
    at urlencodedParser (C:\wamp64\www\RVSlinkyLinks\node_modules\@okta\oidc-middleware\node_modules\body-parser\lib\types\urlencoded.js:91:7)
    at Layer.handle [as handle_request] (C:\wamp64\www\RVSlinkyLinks\node_modules\express\lib\router\layer.js:95:5)

What's weird is that on my work computer (locally), this rarely comes out but still, it pops from time to time. But on my home laptop (still locally), I always get this error. I cannot go to /login page. I have installed Okta using "npm install @okta/oidc-middleware" in both environments. I can also test that this library is working because if I try to change any parameter in the ExpressOIDC constructor, I get an error. Both my work and home laptop are running Windows 10.

I'm trying to use the SDK for vue but it's missing the dist files. Can we please update the package :)

Thanks!

I can see that at present this doesn't quite vibe with the Social Login capabilities that Okta has:

• for one the base for the issuer (e.g. https://dev-xxxx.oktapreview.com/oauth2/ default ) is marginally different from url generated for social login ( e.g. https://dev-xxxx.oktapreview.com/oauth2/ v1 )
• the social login auth URL requires an idp query parameter
• from a quick skim of the docs, it looks like social uses hybrid flow.

Are there any plans to support Social through this library ?

More info: https://www.thepolyglotdeveloper.com/2016/05/add-type-definitions-external-javascript-library-typescript/

To reproduce, start an express server with oidc_middleware integrated
Hit the following endpoint - /authorization-code/callback?state=bad_state

Ideally, this is should either a 400/401

I'm trying to build an app using the latest release of @okta/oidc-middleware, and ran into a critical issue: the library is now using the uuid dependency, but hasn't packaged it up as a dependency, so any apps using the latest library release break immediately.

Would it be possible to get a hotfix out for this?

When authentication is successful it redirects to a callback route in the app. And this route redirects to the page we were originally trying to access.

The problem is that the redirect is made with a push instead of a replace, that means that if the user hits the back button they will be back to the callback route which will fail.

Uncaught (in promise) n {name: "AuthSdkError", message: "Unable to parse a token from the url", errorCode: "INTERNAL", errorSummary: "Unable to parse a token from the url", errorLink: "INTERNAL", …}

Can we do the redirect with replace instead of push?

Hey there,

I noticed that the React logout always redirects back to / even though the App Settings in the Dev Console allows you to set a Logout redirect URI.

Is this behavior intended?

Following quickstart guide (here: https://developer.okta.com/quickstart/#/angular/nodejs/express) but having problems post-login.

Clearly i have logged in, and I have tokens, however they are sitting within my Cookies not Local Storage like the guide says.

Not sure if this is affecting the isAuthenticated function... but unable to retrieve token as a result for use.

I tried to build and run the okta-react package, but I got this on Windows:

> @okta/[email protected] start C:\Users\Nate Barbettini\Documents\code\okta-oidc-js\packages\okta-react
> npm run --prefix test/e2e/harness start


> [email protected] start C:\Users\Nate Barbettini\Documents\code\okta-oidc-js\packages\okta-react\test\e2e\harness
> REACT_APP_ISSUER=$ISSUER REACT_APP_CLIENT_ID=$CLIENT_ID react-scripts start

'REACT_APP_ISSUER' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `REACT_APP_ISSUER=$ISSUER REACT_APP_CLIENT_ID=$CLIENT_ID react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I think cross-env would fix this easily. I'll try to submit a PR.

Enhancement request for adding support for Angular Universal.
Currently the module fails on runtime with
ERROR ReferenceError: window is not defined

using Angular 5.
I am not able to receive the requested scopes.

according to this answer
https://support.okta.com/help/answers?id=9062A000000bmOuQAI&feedtype=SINGLE_QUESTION_DETAIL&dc=Okta_Application_Network&criteria=OPENQUESTIONS&

Scopes can only be received when either id_token or token is used
tested and received scopes after removing token from request.

EDIT
Referencing line:

In SecureRoute.js

There is no way to specify additional route props, e.g. exact

Why do the compiled files contain async functions? renders them unusable on IE11

Here's how it's implemented in JHipster:

https://github.com/jhipster/generator-jhipster/blob/master/generators/client/templates/angular/src/main/webapp/app/shared/auth/has-any-authority.directive.ts.ejs

Might not be the best place to post this but look at the following documentation: https://developer.okta.com/quickstart/#/react/nodejs/generic

cliend_id and clientId is used. This tripped me up when trying to get things running.

const config = {
  issuer: 'https://dev-296645.oktapreview.com/oauth2/default',
  redirect_uri: window.location.origin + '/implicit/callback',
  client_id: '{clientId}'
}

class App extends Component {
  render() {
    return (
      <Router>
        <Security issuer={config.issuer}
                  client_id={config.clientId}
                  redirect_uri={config.redirect_uri} >
          <Route path='/' exact={true} component={Home}/>
          <Route path='/implicit/callback' component={ImplicitCallback} />
        </Security>
      </Router>
    );
  }
}

OktaAuthService.loginRedirect() is designed to pass along, by default, the OktaConfig.scopes value passed in to OktaAuthModule.initAuth(), but that is not functioning as intended and as a consequence the scopes default to ['openid', 'email'].

The code below refers to this.config.scope, which is always 'undefined':

OktaAuthService constructor initializes this.config with auth, and auth.scopes is initialized right above via a call to this.scrubScopes():

One issue is that the string returned by OktaAuthService.scrubScopes() is assigned to this.config.scopes instead of this.config.scope.

The second issue is that even if the assignment in line 55 is changed to: auth.scopes = this.scrubScopes(auth.scopes);, the subsequent call to the underlying JS library will fail, as scope is obsolete and the current code simply assigns scope (a string) to scopes (an array of strings), and as a consequence the code further fails because join() does not exist on a string.

The solution would be to:

• Change OktaAuthService.scrubScopes() to return a scrubbed array of strings instead of a string;
• Change line 104 to: scopes: this.config.scopes

The workarounds I found so far:

• When calling OktaAuthService.loginRedirect(), include scopes: [<desired scopes>] as part of the additionalParams parameter
• Or, before the line containing the call to OktaAuthService.loginRedirect(), call oktaAuthService.getOktaConfig().scope = [<desired scopes>] - this just takes advantage of the bug, so it should be least desired workaround

I'm looking for a way to use okta with my React app which was generated using Create-React-App, however, I'm running into trouble when adding these modules as they use async functions which are an ES2017 feature. By default, Webpack only transpiles my app code into ES5 using the babel loaders and plugins, however, it does not transpile external dependencies due to performance considerations. As a result, I am running into errors when it imports these modules. I believe this will be an issue for anyone using Create-React-App to bootstrap a new project, unless they eject and configure webpack to compile all dependencies as well (which is inadvisable as it drastically slows down webpack compilation times). I was able to correct the issue by transpiling the dependencies manually, but it seems like it would be much easier for consumers if these libraries were hosted in the more widely supported ES5 syntax. This seems like the standard for most other libraries. Do you know if this is a possibility or do you know of any workarounds for Create-React-App users?

Hello,

I've run into an issue where the solution would be to be able to configure the OktaAuthModule at runtime, if that even makes sense.

In Angular, we have the two default environments: dev (default) and prod (ng build --prod). When it comes time to release, and our continuous integration says our tests pass on master, I use Octopus to generate a release by first deploying to our dev staging environment. If all is well, I deploy to our test staging environment. After more checks there, I deploy this release to production and all is happy in the world.

The problem is this: each of those staging environments and the production environment have their own domain (i.e. <app-name>dev.domain.com, <app-name>test.domain.com, and <app-name>.domain.com). This comes into play when I have to configure the OktaAuthModule in app.module.ts. When I deploy to my dev staging environment, then try to log in, I get redirected to my production uri instead of my dev one (app.module.ts):

    OktaAuthModule.initAuth({
      issuer: environment.oktaURL,
      redirectUri: `${environment.rootURI}/implicit/callback`,
      clientId: '<client-id>'
    })

What we've done to solve this in other places is to have a settings.json file in our bundled application that is accessible through a AppSettingsService that makes local http calls to the json file to retrieve configuration settings that Octopus does a Find and Replace on during the deployment process. But I'm assuming I can't take this same approach here because this is actually happening before I can inject any of my services, correct?

I've thought of some alternatives, but I don't like them:

• have a separate build for each staging environment in Angular.
  • Octopus provides deploying the same application bundle to several staging environments very easily. We'd be defeating the purpose of using a deployment system like this if we had to go make another build and have a separate release for each staging environment. So I don't WANT to do this.
• Have a complicated Find and Replace step in Octopus for looking for the OktaAuthModule import statement and replace the redirectUri with the right one.
  • I'm afraid of this one because I don't know what app.module.js looks like well enough to to a Find and Replace rule that works 100% of the time.

Any ideas?

okta-auth-js supports silent authentication/silent refresh. Let's have a good strategy around exposing this core functionality as part of the client-side sdks

Let's say I have my router set up just like your example:

<Router>
  <Security issuer={config.issuer}
    client_id={config.clientId}
    redirect_uri={config.redirect_uri} >
    <Route path='/' exact={true} component={Home}/>
    <Route path='/implicit/callback' component={ImplicitCallback} />
  </Security>
</Router>

Once I've successfully authenticated, all is well and I'm redirected back to my application as expected... unless I try to refresh.

Because the ImplicitCallback component is using <Redirect to={pathname} /> and not <Redirect push to={pathname} />, my history isn't overwritten and I get an error when I try to refresh the page after being redirected: AuthSdkError: Unable to parse a token from the url because my window location is still http://localhost:3000/implicit/callback.

I think the fix may be to just specifiy push to make sure that when you're redirected back from Okta, the desired location is pushed onto the history stack so that when the user refreshes they aren't revisiting /implicit/callback.

If I'm wrong on this, I'd appreciate a pointer :)

if accessToken -> request /userinfo endpoint
if !accessToken -> decode idToken for claims

I have been bashing my head against the APIs for a couple of days trying to use it as my auth/user system for application without using the login window. I am new to auth and Okta and it's hard to figure out all the different parts.

Then when I thought I finally put everything together correctly, I got SigningKeyNotFoundError.

My code is almost identical to the example. I don't understand what I am doing different than what's in the repo.

I also saw this other issue that might be related #46 — just don't know how my situation is similar or different.

function getAccessToken({ code }) {
  const url = `https://dev-{code}.oktapreview.com/oauth2/v1/token?grant_type=authorization_code&code=${code}&redirect_uri=${redirectUri}`;
  const base64ClientIdSecret = Buffer.from(
    `${clientId}:${clientSecret}`,
  ).toString('base64');
  return axios({
    method: 'post',
    headers: {
      Authorization: `Basic ${base64ClientIdSecret}`,
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    url,
  });
}

// https://github.com/okta/okta-oidc-js/blob/master/packages/jwt-verifier/test/util.js
router.post('/login', (req, res) => {
  console.log('login');
  login(req)
    .then(response => {
      getAuthCode({ sessionToken: response.data.sessionToken })
        .then(authResponse => {
          const responseUrl = authResponse.request.res.responseUrl // eslint-disable-line
          const match = responseUrl.match(/access_token=([^&]+)/);
          const accessToken = match && match[1];

          console.log('responseUrl', responseUrl);
          console.log('accessToken', accessToken);

          oktaJwtVerifier
            .verifyAccessToken(accessToken)
            .then(jwt => {
              res.status(200).send({ status: 'success', jwt });
            })
            .catch(err => {
              console.log(err);
              res.status(401).send({
                status: 'failure',
                message: 'Unable to verify',
              });
            });
        })
        .catch(error => {
          if (error.response) {
            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
          } else if (error.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            console.log(error.request);
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log('Error', error.message);
          }
          console.log(error.config);
          console.log('Error', error.message);
        });
    })
    // eslint-disable-next-line
    .catch(error => {
      console.log(error.message);
      res.status(500).send({
        message: 'Server Error',
      });
    });
});

I am new to Auth and all these things, I was hoping it be a little easier, most of the examples use the Okta login widget — I need a custom login.

Support id_token, token, id_token token, etc responseType

config = {
  ...
  responseType: 'id_token token'
}

Copied from okta/okta-auth-js#84

Ionic uses a NavController instead of Angular Router. Attached is the error that happens when you try to use Okta's Angular SDK in an Ionic project.

I think I found the cause of one of the weird bugs I have in my application. Sometimes I enter and the homepage loads normally and then I click something and it redirects me to the login page. I think it's because the arguments to the navigation guard are backward.

In the source code we have (from, to next) and in the documentation, it says it should be (to, from, next).

Hello,

I would like to pass a prop to a component that I am rendering with SecureRoute.

In react-router, this can be done with something like this:
<Route path='/path' render={() => <MyComponent prop={x}>} />

It seems that I cannot use the render function with SecureRoute. Is there a way to pass props?

Suggested fix:
Change this:

return <C {...renderProps} {...this.props.customProps} />; 

and we can pass in props like this:
<SecureRoute path='/path' component={MyComponent} customProps={{ foo: 'bar' }} />

Inspired by https://devforum.okta.com/t/implicit-callback-redirects-to-the-angular-component-and-then-to-homepage-automatically/960/6.

Cannot be used with Angular 5 apps:

npm WARN @okta/[email protected] requires a peer of @angular/common@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @okta/[email protected] requires a peer of @angular/core@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @okta/[email protected] requires a peer of @angular/platform-browser@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @okta/[email protected] requires a peer of @angular/router@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.

Full error details:

> AssertionError: id_token issued in the future
>     at Client.validateIdToken (/var/www/html/rvseo-data/node_modules/openid-client/lib/client.js:469:7)
>     at grant.then.then.tokenset (/var/www/html/rvseo-data/node_modules/openid-client/lib/client.js:333:32)
>     at process._tickCallback (internal/process/next_tick.js:109:7)

This is the error I always get on my test server whenever I finish logging in. This error appears in the /authorization-code/callback. I don't get this error message locally and I'm afraid that when going production, this error appears all the time.

Problem:

• When using the okta-angular package, if a user's session is timed out, they are redirected to the Okta login page with a callback URL that contains query-string parameters. The problem is that the query string parameters are being converted using, what I assume to be, something like JavaScript's encodeURIComponent. All of the ? and & and other symbols are converted, which breaks our UI application's URLs when the callback is handled within the okta-angular library to handle the redirect after a successful login.

Solution:

• No idea how to help here as I don't have the time to go through the code repository to find the exact lines of code that are handling this functionality. I apologize for not doing further code analysis, but hopefully you will be able to resolve this issue fairly quickly.

Issue:

Within the okta-angular package, the typing output for the Okta Service's .getAccessToken() function return value is declared as any. This causes an issue when attempting to retrieve the access token using the .accessToken property on the object that is returned. After a quick search through the repository, it appears that the reason this is occurring is due to the fact that the return type is missing on the getAccessToken() function definition located on this line of code.

Possible Resolution

Need to define either an interface or a class that will contain the definition for the token than is returned from the @okta/okta-auth-js function definition for then token and set that as the type for the return value of the function. If I get a chance, I will attempt to create this pull request, but please don't count on it.

While using this module, Jest tests fail to run. That's probably because of badly transpiled code from the okta-react module. When it is locally transpiled by the create-react-app, not Babel within okta-react module, it works and Jest tests run.

 FAIL  src/main/components/Order/OrderItems/OrderItemsBody.component.test.js
  ● Test suite failed to run

    /Users/mateusz/vd/crm-react/node_modules/@okta/okta-react/dist/Auth.js:54
        value: async function handleAuthentication() {
                     ^^^^^^^^
    SyntaxError: Unexpected token function

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (node_modules/@okta/okta-react/dist/Security.js:31:13)
      at Object.<anonymous> (node_modules/@okta/okta-react/dist/index.js:8:17)

Currently we don't support asserting claims that can be an array.
E.g

const oktaJwtVerifier = new OktaJwtVerifier({ issuer: "http://localhost:9090/oauth2/default", assertClaims: { aud: 'api://default', scp: ['read','write','execute'] }, });

If we try to verify an access token that contains all these claims, we will throw a 401, as we only do string comparison on the claims.

We need to add support for array comparison on claims