Merge branch 'fix/FE/redirect-to-sso' into 'development'

[FIX/FE] Redirect to SSO

See merge request mbugroup/lti-web-client!133

.gitlab-ci.yml

@@ -138,20 +138,20 @@ build:dev:
   environment:
     name: development
   variables:
-    NEXT_PUBLIC_LTI_URL: "https://dev-lti-erp.mbugroup.id"
+    NEXT_PUBLIC_LTI_URL: 'https://dev-lti-erp.mbugroup.id'
-    NEXT_PUBLIC_SSO_LOGIN_URL: "https://dev-auth-erp.mbugroup.id"
+    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://dev-auth-erp.mbugroup.id'
-    NEXT_PUBLIC_API_BASE_URL: "https://dev-api-lti.mbugroup.id/api"
+    NEXT_PUBLIC_API_BASE_URL: 'https://dev-api-lti.mbugroup.id/api'
-    NEXT_PUBLIC_CLIENT_ID: "Lumbung-Telur-Indonesia"
+    NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
 
 deploy:dev:
   <<: *deploy_template
-  needs: ["build:dev"]
+  needs: ['build:dev']
   rules:
     - if: '$CI_COMMIT_BRANCH == "development"'
   variables:
-    S3_BUCKET: "dev-lti-erp.mbugroup.id"
+    S3_BUCKET: 'dev-lti-erp.mbugroup.id'
-    AWS_REGION: "ap-southeast-3"
+    AWS_REGION: 'ap-southeast-3'
-    CLOUDFRONT_DISTRIBUTION_ID: "E1Z8XTA8XF1GIV"
+    CLOUDFRONT_DISTRIBUTION_ID: 'E1Z8XTA8XF1GIV'
   environment:
     name: development
     url: https://dev-lti-erp.mbugroup.id
@@ -166,20 +166,20 @@ build:staging:
   environment:
     name: staging
   variables:
-    NEXT_PUBLIC_LTI_URL: "https://stg-lti-erp.mbugroup.id"
+    NEXT_PUBLIC_LTI_URL: 'https://stg-lti-erp.mbugroup.id'
-    NEXT_PUBLIC_SSO_LOGIN_URL: "https://stg-auth-erp.mbugroup.id"
+    NEXT_PUBLIC_SSO_LOGIN_URL: 'https://stg-auth-erp.mbugroup.id'
-    NEXT_PUBLIC_API_BASE_URL: "https://stg-api-lti.mbugroup.id/api"
+    NEXT_PUBLIC_API_BASE_URL: 'https://stg-api-lti.mbugroup.id/api'
-    NEXT_PUBLIC_CLIENT_ID: "Lumbung-Telur-Indonesia"
+    NEXT_PUBLIC_CLIENT_ID: 'Lumbung-Telur-Indonesia'
 
 deploy:staging:
   <<: *deploy_template
-  needs: ["build:staging"]
+  needs: ['build:staging']
   rules:
     - if: '$CI_COMMIT_BRANCH == "staging"'
   variables:
-    S3_BUCKET: "stg-lti-erp.mbugroup.id"
+    S3_BUCKET: 'stg-lti-erp.mbugroup.id'
-    AWS_REGION: "ap-southeast-3"
+    AWS_REGION: 'ap-southeast-3'
-    CLOUDFRONT_DISTRIBUTION_ID: "E2V6PPO1AUIU7H"
+    CLOUDFRONT_DISTRIBUTION_ID: 'E2V6PPO1AUIU7H'
   environment:
     name: staging
     url: https://stg-lti-erp.mbugroup.id

src/components/helper/RequireAuth.tsx

@@ -29,8 +29,8 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
   >('/sso/userinfo', httpClientFetcher, {
     shouldRetryOnError: false,
 
-    // refresh every 13 minutes
+    // refresh every 12 minutes
-    refreshInterval: 13 * 60 * 1000,
+    refreshInterval: 12 * 60 * 1000,
   });
 
   useEffect(() => {
@@ -61,12 +61,20 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
       async () => {
         await AuthApi.refresh();
       },
-      13 * 60 * 1000
+      12 * 60 * 1000
     );
 
     return () => clearInterval(interval);
   }, []);
 
+  useEffect(() => {
+    const refreshUserSession = async () => {
+      await AuthApi.refresh();
+    };
+
+    refreshUserSession();
+  }, []);
+
   if (
     (isLoadingUserResponse && !userResponse && !userErrorResponse) ||
     (!userResponse && !userErrorResponse)
@@ -78,7 +86,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
     );
   }
 
-  if (userErrorResponse) {
+  if (!isLoadingUserResponse && userErrorResponse) {
     return (
       <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
         <h2 className='text-2xl font-bold text-error'>Authentication Failed</h2>
@@ -86,10 +94,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
           Please try refreshing the page or contact support if the problem
           persists.
         </p>
-        <button
+        <button className='btn btn-primary' onClick={() => redirectToSSO()}>
-          className='btn btn-primary'
-          onClick={() => window.location.reload()}
-        >
           Retry
         </button>
       </div>