connelhooley/react-oidc

A few opinionated React components wrapping oidc-client

react-oidc's Issues

Silent implicit flow failure

I wrote a simple app with your library and I see it authenticating in the developer console.

import React, { useState } from 'react';
import Navbar from 'react-bootstrap/Navbar';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
 
import { Log } from 'oidc-client';
 
import {
  AuthProvider,
  Authorized,
  NotAuthorized,
  SignInButton,
} from '@connelhooley/react-oidc';
 
Log.logger = console;
Log.level = Log.DEBUG;
 
const oidcSettings = {
  authority: '<REMOVED>',
  client_id: '<REMOVED>',
  response_type: 'id_token',
  response_mode: 'query',
  scope: 'openid email',
  redirect_uri: `http://localhost:3000/callback`,
  silent_redirect_uri: `http://localhost:3000/silent-callback`,
  post_logout_redirect_uri: `http://localhost:3000`,
  clockSkew: 60,
  automaticSilentRenew: true,
  accessTokenExpiringNotificationTime: 0,
};
 
function App() {
  return (
    <div>
      <Router>
        <AuthProvider
          oidcSettings={oidcSettings}
          signInCallbackRoute="/callback"
          silentSignInCallbackRoute="/silent-callback"
          signInCallbackFallbackRoute="/"
          defaultAuthorizedRouteRedirect="/"
          defaultNotAuthorizedRouteRedirect="/"
        >
          <Navbar className="mb-4" variant="dark" bg="dark">
            <Authorized>Logged in</Authorized>
            <NotAuthorized>
              <SignInButton>Sign In</SignInButton>
            </NotAuthorized>
          </Navbar>
          <Switch>
            <Route path="/">
              <Authorized>Logged in</Authorized>
              <NotAuthorized>Not Logged in</NotAuthorized>
            </Route>
          </Switch>
        </AuthProvider>
      </Router>
    </div>
  );
}
 
export default App;

In the browser console, I see

UserManager.signinRedirectCallback: successful, signed in sub:  my-username

After I click the SignIn button. I also see all the proper network calls. But I am still seeing "Not Logged in" in the main page.

What might be wrong? How can I debug?

Support manual configuration

It looks like you are making requests to /.well-known/openid-configuration. I couldn't find where in your code, but I would like to add support for manually specifying the various endpoints like authorization, token, userinfo, etc. AWS Cognito does not have the .well-known endpoints, so I would need to configure the Cognito endpoints manually.

Can you briefly explain how I could add this support to your library (assuming you are willing to take a PR :) )? I couldn't find references in your code

Any guidance on testing components that utilize react-oidc?

@connelhooley - thanks for providing a really useful package that immediately filled some of my needs in my project. Very elegant/clean solution.

My main/major question thus far however, is do you have any guidance on how best to mock/test a component, when there's some dependencies on the react-oidc library? I am using jest with @testing-library/react.

Take for example a component that depends on Authorized, NotAuthorized, and Authorizing. All 3 of these depend on useUser, which then depends on AuthProvider. I'll be honest, my jest mocking skills aren't the greatest, and I can't figure out for the life of me how to best mock being in the context of a user.

The closest I came was to mock the entire library via a jest.mock call, and return a module mock:

jest.mock("@connelhooley/react-oidc", () => ({
	...(jest.requireActual("@connelhooley/react-oidc") as Record<string, unknown>),
	useUser: jest.fn(),
	SignIn: () => (<div>Redirect to Sign In</div>),
	Authorized: ({ children }: { children: React.ReactNode }) => (<>{children}</>),
	Authorizing: ({ children }: { children: React.ReactNode }) => (<>{children}</>),
	NotAuthorized: ({ children }: { children: React.ReactNode }) => (<>{children}</>)
}));

This really however seems like a hack and I feel there's got to be a better way. I figured you might have some idea seeing as how I see you have some tests in this project (I tried to utilize the same strategies to no avail), but figured you may be using this library in something else of yours with some tests too.