React Starter App - Login not working

gantoreno · July 14, 2021, 6:55pm

Hi,

I’ve been going through the quick start guide, but I’m caught up in an error where the login button throws an error, redirecting to a page that says “An error was encountered with the requested page”.

I checked my environment variables were loading correctly and they do. All parameters inside the request URL seem to match up with what I have inside .env.local, however authentication is still not working and I haven’t been able to debug this yet.

Any ideas?

gantoreno · July 14, 2021, 8:21pm

After some investigation, I noticed that if I remove the id_token response type, I’m able to proceed to the Auth page, however, since the response type isn’t valid anymore, the token from the process isn’t valid to the app and I receive an ‘invalid token’ and ‘state mismatch’ error.

Also, OAuth admits both ‘token’ and id_token as response_type, but AWS Cognito only admits code and token exclusively. This seems to explain why removing id_token from the request seems to work, but I guess this isn’t expected behavior.

lada.kokotova · July 14, 2021, 8:29pm

Hello!

I’ve got your problem. I’ll let you know soon.

Lada Kokotova | Technical Support Engineer

Fomich · July 15, 2021, 5:52pm

Hello @gantoreno!
Sorry for the troubles with the starter app.
To make it work you should use strategy: AUTH_STRATEGIES.WEB_COGNITO instead of strategy: AUTH_STRATEGIES.WEB_8BASE in your Auth.createClient ( react-8base-starter-app/src/shared/auth/index.js)

github.com

8base/react-8base-starter-app/blob/master/src/shared/auth/index.js

import { Auth, AUTH_STRATEGIES } from '@8base/auth';
/**
 * Creating an Authentication Profile in 8base will provide
 * you with a Client ID and Domain.
 */
const domain = process.env.REACT_APP_AUTH_DOMAIN;
const clientId = process.env.REACT_APP_AUTH_CLIENT_ID;
/**
 * The redirect and logout URIs are all configured in the
 * authentication profile that gets set up in the 8base
 * management console.
 */
const logoutRedirectUri = `${window.location.origin}/logout`;
const redirectUri = `${window.location.origin}/auth/callback`;
/**
 * There are multiple auth strategies that can be
 * used when using 8base. By default, specifying
 * 'web_8base' will configure the 8base auth client.
 */
export default Auth.createClient(

This file has been truncated. show original

chappie · July 19, 2021, 9:03pm

Unfortunately, we’re having the same issues using the vue-8base-starter-app. When trying to login the browser returns ‘An error was encountered with the requested page.’

The strategy is ‘AUTH0_AUTH’ (default from starter app) and using a .env.local file with an 8base auth profile.

Anyone has any idea?