Updated authentication.

src/pages/admin/login.tsx

@@ -1,8 +1,16 @@
-import React, { useState, useEffect } from "react";
+import React, {
+  useState,
+  useEffect,
+} from "react";
 import { NextPage } from "next";
 import { useRouter } from "next/router";
 import styled from "styled-components";
-import { generateToken, setTokenCookie, isAuthenticated } from "@utils/auth";
+import {
+  generateToken,
+  setAccessTokenCookie,
+  setRefreshTokenCookie,
+  isAuthenticated,
+} from "@utils/auth";
 import AdminPageWrapper from "@views/common/AdminPageWrapper";
 
 const Main = styled.div`
@@ -30,8 +38,11 @@ const AdminLoginPage: NextPage = () => {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     try {
-      const token = await generateToken(username, password);
-      setTokenCookie(token);
+      const { access, refresh } = await generateToken(username, password);
+
+      setAccessTokenCookie(access);
+      setRefreshTokenCookie(refresh);
+
       router.push(next);
     } catch (err) {
       setError("Failed to log in!");

src/pages/admin/logout.tsx

@@ -1,12 +1,12 @@
 import { NextPage } from "next";
 import { useRouter } from "next/router";
-import { deleteTokenCookie } from "@utils/auth";
+import { deleteTokenCookies } from "@utils/auth";
 
 const AdminLogoutPage: NextPage = () => {
   const router = useRouter();
   // client-side-only code
   if (typeof window !== "undefined") {
-    deleteTokenCookie();
+    deleteTokenCookies();
     router.push("/admin/login");
   }
   return null;

src/utils/auth.ts

@@ -1,46 +1,80 @@
 import axios from "axios";
 import Cookies from "js-cookie";
 
-const tokenUrl = `${process.env.NEXT_PUBLIC_API_URL}/api-token-auth/`;
-const checkUrl = `${process.env.NEXT_PUBLIC_API_URL}/api-token-verify/`;
+const tokenUrl = `${process.env.NEXT_PUBLIC_API_URL}/token/`;
+const checkUrl = `${process.env.NEXT_PUBLIC_API_URL}/token/verify/`;
+const refreshUrl = `${process.env.NEXT_PUBLIC_API_URL}/token/refresh/`;
 
-export async function generateToken(username: string, password: string): Promise<string> {
+export async function generateToken(username: string, password: string): Promise<{"access":string, "refresh":string}> {
   const resp = await axios.post(tokenUrl, {
     username,
     password,
   });
-  return resp.data.token;
+  return {
+    "access": resp.data.access,
+    "refresh": resp.data.refresh,
+  };
 }
 
-export function setTokenCookie(token: string): void {
-  Cookies.set("jwt", token);
-  Cookies.set("jwt", token, { domain: ".sahkoinsinoorikilta.fi" });
+export function setAccessTokenCookie(access_token: string): void {
+  Cookies.set("jwt_access", access_token);
+  Cookies.set("jwt_access", access_token, { domain: ".sahkoinsinoorikilta.fi" });
 }
 
-export function getTokenCookie(): string {
-  return Cookies.get("jwt");
+export function setRefreshTokenCookie(refresh_token: string): void {
+  Cookies.set("jwt_refresh", refresh_token);
+  Cookies.set("jwt_refresh", refresh_token, { domain: ".sahkoinsinoorikilta.fi" });
 }
 
-export function deleteTokenCookie(): void {
-  Cookies.remove("jwt", { domain: ".sahkoinsinoorikilta.fi" });
-  Cookies.remove("jwt");
+export function getAccessTokenCookie(): string {
+  return Cookies.get("jwt_access");
+}
+
+export function getRefreshTokenCookie(): string {
+  return Cookies.get("jwt_refresh");
+}
+
+export function deleteTokenCookies(): void {
+  Cookies.remove("jwt_access", { domain: ".sahkoinsinoorikilta.fi" });
+  Cookies.remove("jwt_access");
+  Cookies.remove("jwt_refresh", { domain: ".sahkoinsinoorikilta.fi" });
+  Cookies.remove("jwt_refresh");
 }
 
 export async function isAuthenticated(): Promise<boolean> {
   try {
-    const token = getTokenCookie();
-    await axios.post(checkUrl, {
+    const token = getAccessTokenCookie();
+
+    await axios.post(checkUrl, { 
       token,
     });
+
     return true;
   } catch (err) {
-    // remove the cookie since it's invalid
-    deleteTokenCookie();
+    return refreshToken();
+  }
+}
+
+export async function refreshToken(): Promise<boolean> {
+  try {
+    const refresh = getRefreshTokenCookie();
+    if (refresh) {
+      const resp = await axios.post(refreshUrl, {
+        refresh,
+      });
+    
+      setAccessTokenCookie(resp.data.access);
+      
+      return true;
+    }
+    return false;
+  } catch (err) {
+    deleteTokenCookies();
     return false;
   }
 }
 
 export function getAuthHeader(): string {
-  const jwt = getTokenCookie();
-  return `JWT ${jwt}`;
+  const jwt = getAccessTokenCookie();
+  return `Bearer ${jwt}`;
 }