Redirected to implicit callback page and displaying blank screen

[d12santosh]

Related Issue
902

Pull Request
903

I'm submitting this issue for the package(s):

• jwt-verifier
• okta-angular
• oidc-middleware
• okta-react
• okta-react-native

I'm submitting a:

• Bug report
• Feature request
• Other (Describe below)

Current behavior

Single Page application flow
Home page (Secure Route with URL mapping '/') redirects to Login Page, upon authorising returned to implicit callback with code and token and displaying blank screen

Expected behavior

expected behaviour to call Logincallback and redirected to secure route home page (path '/')

Minimal reproduction of the problem with instructions

unable to upload sample code to github because of organisation guidelines and appending below mock up,
APP.js

const ErrorBoundary = lazyWithPreload(() => import(/* webpackChunkName: "ErrorBoundary" */ '../Error/ErrorBoundary'));
const App = () => (
  <Suspense fallback={<DelayedFallback />}>
    <ErrorBoundary>
      <BrowserRouter forceRefresh>
        <AppWithRouterAccess />
      </BrowserRouter>
    </ErrorBoundary>
  </Suspense>
);

export default App;

AppwithRouterAccess.js

const NotFound = lazy(() => import(/* webpackChunkName: "NotFound" */ '../Error/NotFound'));
const UserList = lazy(() => import(/* webpackChunkName: "UserList" */ '../User/UserList'));

const AppWithRouterAccess = () => {
  const dispatch = useDispatch();
  const history = useHistory();
  const onAuthRequired = () => {
    history.push('/login');
  };

  return (
    <Security
      {...config.oidc}
      onAuthRequired={onAuthRequired}
    >
      <Switch>
        <Route path="/login" render={() => <SignIn />} />

        />
        <SecureRoute path="/" component={UserList} />
        <Route path="*" to={NotFound} />
        <Route path="/implicit/callback" component={LoginCallback} />
      </Switch>
    </Security>
  );
};
export default AppWithRouterAccess;

import React, { useEffect } from 'react';
import { Redirect } from 'react-router-dom';
import { useOktaAuth } from '@okta/okta-react';
import Login from './Login';


const SignIn = () => {
  const { authState, authService } = useOktaAuth();
  useEffect(() => {
    if (authState.isAuthenticated) {
      console.log('User is Authenticated!', authState);
    } else {
      // console.log('User is NOT authenticated.', authState);
      // authService.logout();
    }
  }, [authState]);
  return authState.isAuthenticated
    ? <Redirect to={{ pathname: '/' }} />
    : <Login  />;
};
export default SignIn;

const Login = () => {
  const history = useHistory();
  const [form] = Form.useForm();
  const { issuer } =  config.oidc
  const {authState, authService} = useOktaAuth();
  const oktaAuth = new OktaAuth({ issuer: issuer});
  const onFinish = (e) => {
    // After remote login success
    e.preventDefault();
    const username = form.getFieldValue("username");
    const password = form.getFieldValue("password");
    oktaAuth.signIn({username, password})
        .then(res => {
          if(res.status === 'SUCCESS') {
            const sessionToken = res.sessionToken;
            // sessionToken is a one-use token, so make sure this is only called once
            authService.redirect({sessionToken});
          }else{
            console.log('login failed', res);
          }
        }).catch(err => console.log('Found an error', err));
  };

  const resetForm = () => {
    form.resetFields();
  };
  return (
    <Form
      name="login"
      form={form}
      initialValues={{
        remember: true,
      }}
      className="login"
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Row>
        <Col span={24} style={{ textAlign: 'right' }}>
          <Button
            type="primary"
            htmlType="button"
            style={{ marginRight: '10px' }}
            onClick={resetForm}
          >
            Reset
          </Button>
          <Button type="primary" htmlType="submit" onClick={onFinish}>
            Submit
          </Button>
        </Col>
      </Row>
    </Form>
  );
};
export default Login;

Extra information about the use case/user story you are trying to implement

secured Home page ('/') -> should redirect to Login page -> after authentication and authorisation -> redirect to secure Home page

Environment

• Package Version: 3.0.7 (okta-react)
• Browser: chrome 80
• OS: Windows 10
• Node version (node -v): 12.18.3
• Other:

[shuowu]

@d12santosh I think the issue may come from

<Switch>
        <Route path="/login" render={() => <SignIn />} />

        />
        <SecureRoute path="/" component={UserList} />
        <Route path="*" to={NotFound} />
        <Route path="/implicit/callback" component={LoginCallback} />
</Switch>

You may want:

1. put <Route path="/implicit/callback" component={LoginCallback} /> before the notFound route to prevent the notFound route from matching before the LoginCallback.
2. change <Route path="*" to={NotFound} /> to <Route path="*" render={NotFound} />, looks like the Route component accepts render or path, but no path props.

[d12santosh]

@shuowu

Thank you for suggestions, i am able to login now.