If OAuth fails, redirect to a useful error page

[nerdalert]

Currently the token on ui SaaS has expired and it redirects to a 404. You can replicate the behavior by putting in a bogus Github token in the .env.

Here are client logs:

GET http://localhost:3000/error?error=AccessDenied 404 (Not Found)Understand this errorAI
Navigated to http://localhost:3000/error?error=AccessDenied

Here are server logs:

2025-01-03T21:53:14.104Z error: Error fetching GitHub organization membership for user nerdalert: Request failed with status code 401
 GET /api/auth/callback/github?code=xxxxxxxxxx&state=S-nZhFRwRPIH94q1uuS5Q 302 in 979ms
 GET /api/auth/error?error=AccessDenied 302 in 7ms
 GET /error?error=AccessDenied 404 in 19ms

[elkielki]

@nerdalert @vishnoianil Hi, I created a simple error page, but I’m not sure if it’s designed in the most useful way. Are there any details that you think I should add in particular to make the error page more useful?

If not, would it make sense to create a pull request as-is, so someone with more UX experience can refine it? Or would it be better to hold off for now?

[vishnoianil]

@Misjohns Can you please review this new error page and provide you suggestion. The page is to display any error that is encountered during the login process. Currently it's shows very basic web page with error message. @elkielki has a design proposal above for the new error page. If you have any suggestion please share, so @elkielki can take those in consideration.

[Misjohns]

@vishnoianil Should the text reflect the standard 404 not found or do we know the actual error, GH token invalid?

[Misjohns]

@vishnoianil If this is a server side error we should follow these guidelines.

If there are validation errors when users submit a form, the entire page is reloaded.

And we show a inline error message at top of the form.

[vishnoianil]

@vishnoianil Should the text reflect the standard 404 not found or do we know the actual error, GH token invalid?

I think we do get error message, that we can catch in the code an rephrase.

[vishnoianil]

@vishnoianil If this is a server side error we should follow these guidelines.

If there are validation errors when users submit a form, the entire page is reloaded.

And we show a inline error message at top of the form.

That looks like a better option to me. @elkielki what do you think?

[Misjohns]

Is there a fix a user can take to resolve this issue? If so, we should provide guidance in the error alert.

[vishnoianil]

Is there a fix a user can take to resolve this issue? If so, we should provide guidance in the error alert.

For some scenarios, yes, like the token expired scenario. But if the github itself is down, user has no control over it.

[elkielki]

@vishnoianil If this is a server side error we should follow these guidelines.

If there are validation errors when users submit a form, the entire page is reloaded.

And we show a inline error message at top of the form.

That looks like a better option to me. @elkielki what do you think?

Hi @vishnoianil, so I got the alert on the page, but the page currently flashes white before showing the alert. I'm not sure if this is due to the page refreshing or accessing GitHub and redirecting back to the login page after the error. Either way, I'm having trouble trying to get rid of it. Is it okay as-is or do you have any ideas as to what might help get rid of it?

InstructLab.UI.-.Google.Chrome.2025-03-05.16-32-22.mp4

[vishnoianil]

Issue is fixed through #674