Automatically refresh the auth token in the example app (#90)

example-embedded-app/pages/api/prismatic-auth.tsx

@@ -18,7 +18,7 @@ export default function handler(_req, res) {
       customer: config.customer,
       nbf: currentTime,
       iat: currentTime,
-      exp: currentTime + 60 * 60 * 4, // 4 hours from now
+      exp: currentTime + config.tokenValidSeconds,
       role: config.role,
     },
     config.signingKey, // Store this somewhere safe

example-embedded-app/prismatic/types.ts

@@ -31,4 +31,11 @@ export interface PrismaticConfig {
    * for documentation
    */
   prismaticRefreshToken?: string;
+
+  /**
+   * Duration the auth token is valid in seconds.
+   * usePrismaticAuth.ts will automatically refresh the auth token
+   * 30 seconds before it expires.
+   */
+  tokenValidSeconds: number;
 }

example-embedded-app/src/usePrismaticAuth.ts

@@ -3,6 +3,7 @@ import axios from "axios";
 import Router from "next/router";
 import prismatic from "@prismatic-io/embedded";
 import React, { useEffect, useMemo } from "react";
+import config from "../prismatic/config";
 
 interface UserInfoProps {
   authenticatedUser: {
@@ -46,6 +47,7 @@ const usePrismaticAuth = (): AuthConfig => {
   const { data, error } = useSWR<{ token: string }>(
     "/api/prismatic-auth",
     fetcher,
+    { refreshInterval: (config.tokenValidSeconds - 30) * 1000 }, // Refresh token 30 seconds before expiration
   );
 
   const token = useMemo(() => data?.token, [data?.token]);