MERN app on Heroku- 'Cannot GET /implicit/callback'

[baelor_breakspear]

Okay, so I have been developing a MERN app with Okta for authentication. (Complete noob here, so please feel free to give me feedback if you find any kind of holes in the code).

While on the local server, things went well and also for some time on Heroku. But now, every time I login into my application, it is redirected to a long url and returns the message Cannot GET /implicit/callback on screen.

The React App.js configuration is as follows-

import React, { Component } from 'react';
import './App.css';
import SearchBox from './components/SearchBox';
import UploadBox from './components/UploadBox';
import Base from './components/Base';
import Navbar from './components/Navbar';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import {Security, SecureRoute, ImplicitCallback} from '@okta/okta-react';
import Login from './components/auth/Login';

function onAuthRequired({history}) {
  history.push('/login');
}

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


export default class App extends Component {
  render() {
    return (
      <Router>
        <Security issuer={config.issuer}
                  client_id={config.client_id}
                  redirect_uri={config.redirect_uri}
                  onAuthRequired={onAuthRequired}>
        <Navbar />
      <div className="container">
        <Route path="/" exact={true} component={Base} />
        <SecureRoute path="/home" exact={true} component={Home} />
        <Route path='/login' render={() => <Login baseUrl='https://dev-647446.oktapreview.com' />} />
        <Route path='/implicit/callback' component={ImplicitCallback} />
      </div>
        </Security>
      </Router>
    )
  }
}

Please let me know if you need any additional information regarding the code.

[mraible]

You probably need to configure Heroku so it knows your app is a SPA and all 404s should route back to your index.html. I’ve done this in the past by including a static.json file in my project with the following contents:

{
  "https_only": true,
  "root": ".",
  "routes": {
    "/**": "index.html"
  }

See Heroku’s documentation for more information: https://github.com/heroku/heroku-buildpack-static

[baelor_breakspear]

Thanks mraible.

I tried what you said, but it doesn’t seem to be working for my programme.

The error now being shown is 404 Not Found | nginx

[mraible]

Make sure your app is using Heroku’s static buildpack. You can get a list of buildpacks used by your app by running heroku buildpacks.