Estoy tratando de implementar un flujo OAuth2 para una aplicación web de una sola página, pero no sé cómo manejar el lado de los redireccionamientos de Frontend/Javascript.

Tengo el backend resuelto: estoy usando una biblioteca que hace todo el trabajo y expone 2 rutas:

• /auth/authorize devuelve una respuesta json como esta:

   { "authorization_url": "https://github.com/login/oauth/authorize?response_type=code&client_id=d263f54&redirect_uri=http%3A%2F%2Fxxx&state=eyJ0eXAiOiJkdjsfkj&scope=read" }

• /auth/callback que cuando el proveedor de OAuth lo llama como redirect_uri (Github aquí), devuelve una respuesta json como

   {"access_token":"jhfgkjhdfkjghkdhgkdhgfd","token_type":"bearer"}

  (si se utiliza la autenticación de Portador), o simplemente null (si se utiliza la autenticación de Cookie. En ese caso, la cookie está configurada correctamente en el navegador)

Sin embargo, ¿cómo debo manejar esto en la interfaz?

Cuando un usuario hace clic en el botón Iniciar sesión, puedo redirigirlo a la página de inicio de sesión del proveedor de Oauth con algo como

 window.open(axios.get('/auth/authorize').data.authorization_url);

, ningún problema.

Pero luego, si en mi proveedor de OAuth registro la devolución de llamada para que sea /auth/callback , el usuario será redirigido a una página que solo muestra texto, lo cual no es bueno.

Creo que se supone que debo registrar una ruta Frontend como devolución de llamada del proveedor de OAuth, y esa ruta debe escuchar la respuesta del proveedor de OAuth y reenviar manualmente exactamente la misma respuesta a la auth/callback de llamada del backend.

¿Cómo haces esto en Axios/Javascript?

¿Hay una forma correcta/mejor práctica de hacer esto?

¡Gracias!

(como información adicional, la biblioteca de back-end que estoy usando es FastAPI-Users y la interfaz está en Vuejs)