React Starter App Deploy Log In Issues

1

Hello,

I am having issues with the react starter app after I have deployed it to netlify with regards to signing in. When I am running it locally it works but when I try to click sign in on my hosted version netlify says the page is not found.

2

Hey @ryangibbons94 - unfortunately not enough info here for us to help. Please share more details, and maybe too checkout Netlify community.

3

Hello,

Thank you for your reply.

I can share my profile or code with you if that would help.

Basically, when I am running the app locally the authentication works but when I try to run the application after deploying it to Netlify, it says “Page not found” after the user types in their email and password.

You can see my deployed version at https://8base-todo.netlify.app/

4

If you have a repo link, feel free to share it. However at first glance, did you whitelist the callback URL in your authentication profile?

5

I think I whitelisted the callback URL though I am not confident that I did it correctly.

Here is what I tried.

Screenshot 2022-06-30 155759
Screenshot 2022-06-30 155759869×523 29.7 KB

The repo is: https://github.com/ryangibbons94/8basereactapp

Thank you for the help by the way!

6

I tried signing up but the app is at the user limit for signups :man_facepalming:

This is a stretch, but based on the name spacing in the auth module, is the callback path for your app actually /auth/auth/callback?

export const AuthRoutes = () => (
  <React.Fragment>
    <Route exact path="/auth/" component={AuthContainer} />
    <Route path="/auth/callback" component={CallbackContainer} />
  </React.Fragment>
);

This namespace is already prefaced with auth in:

/* Import Route Components */
import { Home } from './home';
import { Profile } from './profile';
import { AuthRoutes } from './auth';

export const Routes = () => {
  return (
    <Switch>
      <Route path="/auth" component={AuthRoutes} />
      <Route>
        <div>
          <NavBar />
          <hr />
          <div>
            <Switch>
              <Route exact path="/" component={Home} />
              <ProtectedRoute exact path="/profile" component={Profile} />
              <Redirect to="/" />
            </Switch>
          </div>
        </div>
      </Route>
    </Switch>
  );
};

Like I said, this is a stretch and it wouldn’t make sense if everything is working locally… but caught my eye.