fix(core): add redirectURI to the response body of register endpoint /user (#119)

* fix(ui): hide loading status

should hide loading status while a http error is thrown

* fix(ui): use api-hooks for consent request

integrate api-hooks for the consent page request

* fix(ui): add redirectURI to the response body of register endpoint

Fix the use registration flow, should redirect after a success registration callback

packages/core/src/routes/init.ts

@@ -17,7 +17,7 @@ const createRouters = (provider: Provider) => {
 
   statusRoutes(anonymousRouter);
   sessionRoutes(anonymousRouter, provider);
-  userRoutes(anonymousRouter);
+  userRoutes(anonymousRouter, provider);
   swaggerRoutes(anonymousRouter);
 
   const router: AuthedRouter = new Router();

packages/core/src/routes/user.ts

@@ -1,5 +1,6 @@
 import { PasswordEncryptionMethod } from '@logto/schemas';
 import { nanoid } from 'nanoid';
+import { Provider } from 'oidc-provider';
 import { object, string } from 'zod';
 
 import RequestError from '@/errors/RequestError';
@@ -10,7 +11,7 @@ import { encryptPassword } from '@/utils/password';
 
 import { AnonymousRouter } from './types';
 
-export default function userRoutes<T extends AnonymousRouter>(router: T) {
+export default function userRoutes<T extends AnonymousRouter>(router: T, provider: Provider) {
   router.post(
     '/user',
     koaGuard({
@@ -36,13 +37,24 @@ export default function userRoutes<T extends AnonymousRouter>(router: T) {
         passwordEncryptionMethod
       );
 
-      ctx.body = await insertUser({
+      await insertUser({
         id,
         username,
         passwordEncrypted,
         passwordEncryptionMethod,
         passwordEncryptionSalt,
       });
+
+      const redirectTo = await provider.interactionResult(
+        ctx.req,
+        ctx.res,
+        {
+          login: { accountId: id },
+        },
+        { mergeWithLastSubmission: false }
+      );
+      ctx.body = { redirectTo };
+
       return next();
     }
   );

packages/ui/src/hooks/use-api.ts

@@ -28,6 +28,8 @@ function useApi<Args extends any[], Response>(
       if (error instanceof HTTPError) {
         const kyError = await error.response.json<RequestErrorBody>();
         setError(kyError);
+        setLoading(false);
+        return;
       }
 
       setLoading(false);

packages/ui/src/pages/Consent/index.tsx

@@ -2,18 +2,22 @@ import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { consent } from '@/apis/consent';
+import useApi from '@/hooks/use-api';
 
 const Consent = () => {
   const { t } = useTranslation();
+  const { result, run: asyncConsent } = useApi(consent);
 
   useEffect(() => {
-    const autoConsent = async () => {
-      window.location.assign((await consent()).redirectTo);
-    };
-
-    void autoConsent();
+    void asyncConsent();
   }, []);
 
+  useEffect(() => {
+    if (result?.redirectTo) {
+      window.location.assign(result.redirectTo);
+    }
+  }, [result]);
+
   return <div>{t('sign_in.loading')}</div>;
 };