fix(#699): auth token

2 years ago · fc3a3c052c
parent 888ac35156
commit fc3a3c052c
5 changed files with 114 additions and 9 deletions
--- a/public/silent-refresh.html
+++ b/public/silent-refresh.html
@ -1,15 +1,46 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <title></title>
 </head>
+
 <body>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.11.5/oidc-client.min.js" integrity="sha512-pGtU1n/6GJ8fu6bjYVGIOT9Dphaw5IWPwVlqkpvVgqBxFkvdNbytUh0H8AP15NYF777P4D3XEeA/uDWFCpSQ1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.11.5/oidc-client.min.js"
+    integrity="sha512-pGtU1n/6GJ8fu6bjYVGIOT9Dphaw5IWPwVlqkpvVgqBxFkvdNbytUh0H8AP15NYF777P4D3XEeA/uDWFCpSQ1g=="
+    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    new Oidc.UserManager().signinSilentCallback()
+      .then(() => {
+        const refreshToken = new URLSearchParams(document.location.search).get('refresh_token');
+
+          if (refreshToken && /iPad|iPhone|iPod/.test(navigator.userAgent)) {
+          const getDomain = () => {
+            if (! '%NODE_ENV%' || '%NODE_ENV%' === 'development') {
+              return 'localhost';
+            } else {
+              return '.insports.tv';
+            }
+          };
+          const parseJwt = (value) => {
+            const base64Url = value.split('.')[1];
+            const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+            const jsonPayload = decodeURIComponent(window.atob(base64).split('').map((c) => `%${(`00${c.charCodeAt(0).toString(16)}`).slice(-2)}`).join(''));
+
+            return JSON.parse(jsonPayload);
+          };
+          const saveRefreshToken = (value) => {
+            const ref = parseJwt(value);
+            const expires = `expires=${new Date((ref.exp * 1000)).toUTCString()}`;
+            document.cookie = `refresh_token=${value};${expires};path=/;domain=${getDomain()};secure;SameSite=None`;
+          };
+          saveRefreshToken(refreshToken);
+        }
+      })
      .catch((err) => {
        console.error('OIDC: silent refresh callback error', err);
      });
  </script>
 </body>
+
 </html>
--- a/src/features/AuthStore/hooks/useAuth.tsx
+++ b/src/features/AuthStore/hooks/useAuth.tsx
@ -14,7 +14,7 @@ import isString from 'lodash/isString'
 import isBoolean from 'lodash/isBoolean'
 import includes from 'lodash/includes'

-import { PAGES } from 'config'
+import { PAGES, isIOS } from 'config'

 import {
  addLanguageUrlParam,
@ -24,6 +24,7 @@ import {
  setCookie,
  removeCookie,
  isMatchPage,
+  getDomain,
 } from 'helpers'

 import {
@ -65,6 +66,14 @@ export const useAuth = () => {
    })
  }

+  const parseJwt = (value: string) => {
+    const base64Url = value.split('.')[1]
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
+    const jsonPayload = decodeURIComponent(window.atob(base64).split('').map((c) => `%${(`00${c.charCodeAt(0).toString(16)}`).slice(-2)}`).join(''))
+
+    return JSON.parse(jsonPayload)
+  }
+
  const login = useCallback(async () => {
    userManager.signinRedirect({ extraQueryParams: { lang } })
  }, [lang])
@ -79,6 +88,7 @@ export const useAuth = () => {
    removeToken()
    if (key !== 'saveToken') {
      removeCookie('access_token')
+      removeCookie('refresh_token')
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [lang])
@ -158,12 +168,21 @@ export const useAuth = () => {
    }
  }

-  const signinRedirectCallback = useCallback(() => {
+  const saveRefreshToken = (value: string) => {
+    const ref = parseJwt(value)
+    const expires = `expires=${new Date((ref.exp * 1000)).toUTCString()}`
+    document.cookie = `refresh_token=${value};${expires};path=/;domain=${getDomain()};secure;SameSite=None`
+  }
+
+  const signinRedirectCallback = useCallback(async (refreshToken: string | null) => {
    setPage(history.location.pathname)

    userManager.signinRedirectCallback()
      .then((loadedUser) => {
        storeUser(loadedUser)
+
+        if (isIOS && refreshToken) saveRefreshToken(refreshToken)
+
        queryParamStorage.clear()
        if (page.includes(PAGES.useraccount)) {
          history.push(PAGES.home)
@ -187,10 +206,13 @@ export const useAuth = () => {
    const searchToken = urlSearch.get('access_token')
    const searchRefToken = urlSearch.get('id_token')
    const searchExp = urlSearch.get('expires_in')
+    const refreshToken = urlSearch.get('refresh_token')

    const isRedirectedBackFromAuthProvider = Boolean(searchToken && searchRefToken && searchExp)

-    isRedirectedBackFromAuthProvider ? signinRedirectCallback() : checkUser()
+    isRedirectedBackFromAuthProvider
+      ? signinRedirectCallback(refreshToken)
+      : checkUser()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
    checkUser,
--- a/src/features/SystemSettings/hooks.tsx
+++ b/src/features/SystemSettings/hooks.tsx
@ -38,6 +38,7 @@ export const useSystemSettings = () => {
    setSelectedApi(api.value)
    removeToken()
    removeCookie('access_token')
+    removeCookie('refresh_token')
    window.location.reload()
  }

--- a/src/helpers/cookie/index.tsx
+++ b/src/helpers/cookie/index.tsx
@ -29,7 +29,7 @@ export const checkCookie = (name: string) => {
  return token[0]
 }

-const getDomain = () => (
+export const getDomain = () => (
  process.env.NODE_ENV === 'development'
    ? 'localhost'
    : '.insports.tv'
--- a/src/requests/getCredentials.tsx
+++ b/src/requests/getCredentials.tsx
@ -0,0 +1,51 @@
+import { AUTH_SERVICE } from 'config'
+import { ClientIds } from 'config/clients/types'
+
+export type TokenFailedResponse = {
+  error?: {
+    code: number,
+    message: string,
+  },
+  ok: false,
+}
+
+type TokenResponse = {
+  access_token: string,
+  id_token: string,
+  refresh_token: string,
+}
+
+type TokenProps = {
+  client_id: ClientIds,
+  email?: 'string',
+  grant_type?: 'password' | 'refresh_token',
+  id_token?: 'string',
+  password?: 'string',
+  refresh_token: string,
+}
+
+export const getCredentials = async ({
+  client_id,
+  grant_type = 'refresh_token',
+  refresh_token,
+}: TokenProps): Promise<TokenResponse> => {
+  const url = new URL(`${AUTH_SERVICE}/token`)
+
+  const credetials = await fetch(url, {
+    body: JSON.stringify({
+      client_id,
+      grant_type,
+      refresh_token,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  })
+
+  const body: TokenResponse | TokenFailedResponse = await credetials.json()
+
+  if ('ok' in body) return Promise.reject(body.error)
+
+  return Promise.resolve(body)
+}