refresh token

src/SignOut.jsx

@@ -5,12 +5,14 @@ import { setAuth } from "./stores/auth";
 import { useQuery } from "@tanstack/react-query";
 import { Title } from "./components/Title";
 
-export function SignOut() {
-  const logOut = () => {
-    localStorage.removeItem('access_token');
-    setAuth(false);
-  };
+export const logOut = () => {
+  localStorage.removeItem('access_token');
+  localStorage.removeItem('refresh_token');
+  localStorage.removeItem('expires_in');
+  setAuth(false);
+};
 
+export function SignOut() {
   const { data } = useQuery(["profile"], async () => {
     const { data } = await api.get("/api/me/");
     return data;

src/pages/Login.jsx

@@ -3,8 +3,9 @@ import { Alert, Button, Form, Input, Space, Typography } from "antd";
 import { LockOutlined, UserOutlined } from "@ant-design/icons";
 import React from "react";
 import { Navigate } from "react-router-dom";
-import { isAuthorized$ } from "../stores/auth";
+import { isAuthorized$, refreshToken } from "../stores/auth";
 import { signin, signinError$, signinLoading$ } from "../stores/signin";
+import { logOut } from "../SignOut.jsx";
 
 function LoginForm() {
   const signinError = useStore(signinError$);
@@ -13,6 +14,26 @@ function LoginForm() {
   const onFinish = async (values) => {
     const data = await signin(values);
     localStorage.setItem("access_token", data.access_token);
+    localStorage.setItem("refresh_token", data.refresh_token);
+    localStorage.setItem("expires_in", data.expires_in);
+
+    let interval;
+    const onTick = async () => {
+      try {
+        await refreshToken();
+      } catch (error) {
+        clearInterval(interval);
+        logOut();
+        throw error;
+      }
+    }
+    setTimeout(async () => {
+      await onTick();
+      interval = setInterval(async () => {
+        await onTick();
+      }, (data.expires_in - 5) * 1000)
+    }, 0);
+
   };
 
   return (

src/stores/auth.js

@@ -1,5 +1,6 @@
 import { action, atom } from "nanostores";
 import { api } from "../api";
+import { logOut } from "../SignOut.jsx";
 
 export const userInfoLoading$ = atom(true);
 
@@ -9,13 +10,52 @@ export const setAuth = action(isAuthorized$, "setAuth", (store, newValue) => {
   store.set(newValue);
 });
 
+export const refreshToken = () => {
+  return api.request({
+    url: "/realms/SST/protocol/openid-connect/token",
+    baseURL: "https://kk.dev.selftech.ru/",
+    method: "POST",
+    data: {
+      grant_type: "refresh_token",
+      client_id: "postnet",
+      client_secret: "K2yHweEUispkVeWn03VMk843sW2Moic5",
+      token_type: "bearer",
+      refresh_token: localStorage.getItem("refresh_token")
+    },
+    headers: {
+      'Content-type': 'application/x-www-form-urlencoded',
+    },
+  });
+}
+
 async function checkAuth() {
   try {
-    await api.get("/api/me/");
+    const { data } = await refreshToken();
+    localStorage.setItem("access_token", data.access_token);
+    localStorage.setItem("refresh_token", data.refresh_token);
+    localStorage.setItem("expires_in", data.expires_in);
+
+    let interval;
+    const onTick = async () => {
+      try {
+        await refreshToken();
+      } catch (error) {
+        clearInterval(interval);
+        logOut();
+        throw error;
+      }
+    }
+    setTimeout(async () => {
+      await onTick();
+      interval = setInterval(async () => {
+        await onTick();
+      }, (data.expires_in - 5) * 1000)
+    }, 0);
 
     setAuth(true);
   } catch (e) {
     console.log("Not authorized");
+    clearInterval(interval);
   } finally {
     userInfoLoading$.set(false);
   }

src/stores/signin.js

@@ -31,8 +31,8 @@ export async function signin(values) {
   signinLoading$.set(true);
   signinError$.set("");
 
-  try {
-    const { data } = await api.request({
+  const auth = () => {
+    return api.request({
       url: "/realms/SST/protocol/openid-connect/token",
       baseURL: "https://kk.dev.selftech.ru/",
       method: "POST",
@@ -47,6 +47,10 @@ export async function signin(values) {
         'Content-type': 'application/x-www-form-urlencoded',
       },
     });
+  }
+
+  try {
+    const { data } = await auth();
 
     setAuth(true);
     return data;
@@ -64,8 +68,6 @@ export async function signin(values) {
   }
 }
 
-export const resetSignin = function () {};
-
 export const signupLoading$ = atom(false);
 export const signupError$ = atom("");