fix(refresh): save refresh lff facr

2 years ago · 7a2423568a
parent ccb265cb2e
commit 7a2423568a
4 changed files with 65 additions and 14 deletions
--- a/public/silent-refresh.html
+++ b/public/silent-refresh.html
@ -1,15 +1,28 @@
 <!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()
-        .catch((err) => {
-            console.error('OIDC: silent refresh callback error', err);
-        });
+      // обновляем рефреш токен в локалсторадже
+      // так как safari не дает доступ к кукам
+      .then(() => {
+        const refreshToken = localStorage.getItem('refresh_token');
+        if (refreshToken) {
+          localStorage.setItem('refresh_token', new URLSearchParams(document.location.search).get('refresh_token'));
+        }
+      })
+      .catch((err) => {
+        console.error('OIDC: silent refresh callback error', err);
+      });
  </script>
 </body>
-</html>
+
+</html>
--- a/src/features/AuthStore/hooks/useAuth.tsx
+++ b/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 } from 'config'
+import {
+  PAGES,
+  isFacrClient,
+  isLffClient,
+} from 'config'

 import {
  addLanguageUrlParam,
@ -24,6 +28,10 @@ import {
  setCookie,
  removeCookie,
  isMatchPage,
+  REFRESH_TOKEN_KEY,
+  removeRefreshToken,
+  writeRefreshToken,
+  readRefreshToken,
 } from 'helpers'

 import {
@ -77,6 +85,7 @@ export const useAuth = () => {
      userManager.signoutRedirect({ post_logout_redirect_uri: urlWithLang })
    })
    removeToken()
+    removeRefreshToken()
    if (key !== 'saveToken') {
      removeCookie('access_token')
    }
@ -158,12 +167,18 @@ export const useAuth = () => {
    }
  }

-  const signinRedirectCallback = useCallback(() => {
+  const signinRedirectCallback = useCallback(async (refreshToken: string | null) => {
    setPage(history.location.pathname)

    userManager.signinRedirectCallback()
      .then((loadedUser) => {
        storeUser(loadedUser)
+
+        if (
+          refreshToken
+          && (isLffClient || isFacrClient)
+        ) writeRefreshToken(refreshToken)
+
        queryParamStorage.clear()
        if (page.includes(PAGES.useraccount)) {
          history.push(PAGES.home)
@ -175,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,
@ -187,11 +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_KEY)

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

-    isRedirectedBackFromAuthProvider ? signinRedirectCallback() : checkUser()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    isRedirectedBackFromAuthProvider
+      ? signinRedirectCallback(refreshToken)
+      : checkUser()
+      // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
    checkUser,
    signinRedirectCallback,
@ -221,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)
@ -240,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
--- a/src/features/SystemSettings/hooks.tsx
+++ b/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,6 +37,7 @@ export const useSystemSettings = () => {
    const { api } = e.currentTarget
    setSelectedApi(api.value)
    removeToken()
+    removeRefreshToken()
    removeCookie('access_token')
    window.location.reload()
  }
--- a/src/helpers/token/index.tsx
+++ b/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)
+)