public/silent-refresh.html

@@ -11,30 +11,12 @@
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script>
     new Oidc.UserManager().signinSilentCallback()
+      // обновляем рефреш токен в локалсторадже
+      // так как safari не дает доступ к кукам
       .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);
+        const refreshToken = localStorage.getItem('refresh_token');
+        if (refreshToken) {
+          localStorage.setItem('refresh_token', new URLSearchParams(document.location.search).get('refresh_token'));
         }
       })
       .catch((err) => {

src/features/AuthStore/hooks/useAuth.tsx

@@ -14,7 +14,11 @@ import isString from 'lodash/isString'
 import isBoolean from 'lodash/isBoolean'
 import includes from 'lodash/includes'
 
-import { PAGES, isIOS } from 'config'
+import {
+  PAGES,
+  isFacrClient,
+  isLffClient,
+} from 'config'
 
 import {
   addLanguageUrlParam,
@@ -24,7 +28,10 @@ import {
   setCookie,
   removeCookie,
   isMatchPage,
-  getDomain,
+  REFRESH_TOKEN_KEY,
+  removeRefreshToken,
+  writeRefreshToken,
+  readRefreshToken,
 } from 'helpers'
 
 import {
@@ -66,14 +73,6 @@ 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])
@@ -86,9 +85,9 @@ export const useAuth = () => {
       userManager.signoutRedirect({ post_logout_redirect_uri: urlWithLang })
     })
     removeToken()
+    removeRefreshToken()
     if (key !== 'saveToken') {
       removeCookie('access_token')
-      removeCookie('refresh_token')
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lang])
@@ -168,12 +167,6 @@ export const useAuth = () => {
     }
   }
 
-  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)
 
@@ -181,7 +174,10 @@ export const useAuth = () => {
       .then((loadedUser) => {
         storeUser(loadedUser)
 
-        if (isIOS && refreshToken) saveRefreshToken(refreshToken)
+        if (
+          refreshToken
+          && (isLffClient || isFacrClient)
+        ) writeRefreshToken(refreshToken)
 
         queryParamStorage.clear()
         if (page.includes(PAGES.useraccount)) {
@@ -194,7 +190,7 @@ export const useAuth = () => {
         setPage('')
         setSearch('')
       }).catch(login)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     login,
     storeUser,
@@ -206,14 +202,14 @@ 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 refreshToken = urlSearch.get(REFRESH_TOKEN_KEY)
 
     const isRedirectedBackFromAuthProvider = Boolean(searchToken && searchRefToken && searchExp)
 
     isRedirectedBackFromAuthProvider
       ? signinRedirectCallback(refreshToken)
       : checkUser()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     checkUser,
     signinRedirectCallback,
@@ -243,7 +239,7 @@ export const useAuth = () => {
   }, [reChekNewDevice])
 
   useEffect(() => {
-    if (!needCheckNewDeviсe && !user) return undefined
+    if (!needCheckNewDeviсe || !user) return undefined
     const startCheckDevice = setInterval(checkNewDevice, 20000)
     isNewDeviceLogin && clearInterval(startCheckDevice)
     return () => clearInterval(startCheckDevice)
@@ -262,7 +258,13 @@ export const useAuth = () => {
       // библиотека oidc-client не поддерживает обновление токена только на 1 вкладке
       // @ts-ignore
       if (window.isMaster()) {
-        userManager.signinSilent().catch(logout)
+        // safari ограничивает доступ к куке через крос доменные запросы
+        // передаем рефреш токен через квери параметры
+        userManager.signinSilent({
+          extraQueryParams: (isLffClient || isFacrClient) && {
+            refresh_token: readRefreshToken(),
+          },
+        }).catch(logout)
       }
     }
     // если запросы вернули 401 | 403

src/features/SystemSettings/hooks.tsx

@@ -9,8 +9,8 @@ import { SELECTED_API_KEY } from 'helpers/selectedApi'
 
 import { useToggle } from 'hooks/useToggle'
 import { useLocalStore } from 'hooks/useStorage'
-import { removeToken } from '../../helpers'
-import { removeCookie } from '../../helpers/cookie'
+import { removeRefreshToken, removeToken } from 'helpers'
+import { removeCookie } from 'helpers/cookie'
 
 type FormElement = HTMLFormElement & {
   api: HTMLInputElement & {
@@ -37,8 +37,8 @@ export const useSystemSettings = () => {
     const { api } = e.currentTarget
     setSelectedApi(api.value)
     removeToken()
+    removeRefreshToken()
     removeCookie('access_token')
-    removeCookie('refresh_token')
     window.location.reload()
   }
 

src/helpers/cookie/index.tsx

@@ -29,7 +29,7 @@ export const checkCookie = (name: string) => {
   return token[0]
 }
 
-export const getDomain = () => (
+const getDomain = () => (
   process.env.NODE_ENV === 'development'
     ? 'localhost'
     : '.insports.tv'

src/helpers/token/index.tsx

@@ -1,4 +1,5 @@
 export const TOKEN_KEY = 'token'
+export const REFRESH_TOKEN_KEY = 'refresh_token'
 
 export const readToken = () => (
   localStorage.getItem(TOKEN_KEY)
@@ -11,3 +12,15 @@ export const writeToken = (token: string) => (
 export const removeToken = () => (
   localStorage.removeItem(TOKEN_KEY)
 )
+
+export const removeRefreshToken = () => {
+  localStorage.removeItem(REFRESH_TOKEN_KEY)
+}
+
+export const writeRefreshToken = (token: string) => (
+  localStorage.setItem(REFRESH_TOKEN_KEY, token)
+)
+
+export const readRefreshToken = () => (
+  localStorage.getItem(REFRESH_TOKEN_KEY)
+)

src/requests/getCredentials.tsx

@@ -1,51 +0,0 @@
-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)
-}