{showLink && (
diff --git a/components/pages/RealtimeDashboard.js b/components/pages/RealtimeDashboard.js
index 33689086..2dbf858c 100644
--- a/components/pages/RealtimeDashboard.js
+++ b/components/pages/RealtimeDashboard.js
@@ -13,6 +13,7 @@ import useFetch from 'hooks/useFetch';
import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames';
import { percentFilter } from 'lib/filters';
+import { TOKEN_HEADER } from 'lib/constants';
import styles from './RealtimeDashboard.module.css';
const REALTIME_RANGE = 30;
@@ -39,7 +40,7 @@ export default function RealtimeDashboard() {
params: { start_at: data?.timestamp },
disabled: !init?.websites?.length || !data,
interval: REALTIME_INTERVAL,
- headers: { 'x-umami-token': init?.token },
+ headers: { [TOKEN_HEADER]: init?.token },
});
const renderCountryName = useCallback(({ x }) => countryNames[x], []);
diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js
index ddbbbc21..b808f44f 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -20,7 +20,8 @@ import EventsTable from '../metrics/EventsTable';
import EventsChart from '../metrics/EventsChart';
import useFetch from 'hooks/useFetch';
import usePageQuery from 'hooks/usePageQuery';
-import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
+import useShareToken from 'hooks/useShareToken';
+import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER } from 'lib/constants';
const views = {
url: PagesTable,
@@ -32,8 +33,11 @@ const views = {
event: EventsTable,
};
-export default function WebsiteDetails({ websiteId, token }) {
- const { data } = useFetch(`/api/website/${websiteId}`, { params: { token } });
+export default function WebsiteDetails({ websiteId }) {
+ const shareToken = useShareToken();
+ const { data } = useFetch(`/api/website/${websiteId}`, {
+ headers: { [TOKEN_HEADER]: shareToken?.token },
+ });
const [chartLoaded, setChartLoaded] = useState(false);
const [countryData, setCountryData] = useState();
const [eventsData, setEventsData] = useState();
@@ -93,7 +97,6 @@ export default function WebsiteDetails({ websiteId, token }) {
const tableProps = {
websiteId,
- token,
websiteDomain: data?.domain,
limit: 10,
};
@@ -116,7 +119,6 @@ export default function WebsiteDetails({ websiteId, token }) {
-
+
diff --git a/hooks/useShareToken.js b/hooks/useShareToken.js
new file mode 100644
index 00000000..16ee11d0
--- /dev/null
+++ b/hooks/useShareToken.js
@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { get } from 'lib/web';
+import { setShareToken } from 'redux/actions/app';
+
+export default function useShareToken(shareId) {
+ const dispatch = useDispatch();
+ const shareToken = useSelector(state => state.app.shareToken);
+
+ async function loadToken(id) {
+ const { data } = await get(`/api/share/${id}`);
+
+ if (data) {
+ dispatch(setShareToken(data));
+ }
+ }
+
+ useEffect(() => {
+ if (shareId) {
+ loadToken(shareId);
+ }
+ }, [shareId]);
+
+ return shareToken;
+}
diff --git a/lib/auth.js b/lib/auth.js
index 370db1c4..379f6777 100644
--- a/lib/auth.js
+++ b/lib/auth.js
@@ -1,6 +1,6 @@
import { parse } from 'cookie';
import { parseSecureToken, parseToken } from './crypto';
-import { AUTH_COOKIE_NAME } from './constants';
+import { AUTH_COOKIE_NAME, TOKEN_HEADER } from './constants';
import { getWebsiteById } from './queries';
export async function getAuthToken(req) {
@@ -26,7 +26,8 @@ export async function isValidToken(token, validation) {
}
export async function allowQuery(req, skipToken) {
- const { id, token } = req.query;
+ const { id } = req.query;
+ const token = req.headers[TOKEN_HEADER];
const websiteId = +id;
const website = await getWebsiteById(websiteId);
diff --git a/lib/constants.js b/lib/constants.js
index 80d8eed1..72f7fce6 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -4,6 +4,7 @@ export const TIMEZONE_CONFIG = 'umami.timezone';
export const DATE_RANGE_CONFIG = 'umami.date-range';
export const THEME_CONFIG = 'umami.theme';
export const VERSION_CHECK = 'umami.version-check';
+export const TOKEN_HEADER = 'x-umami-token';
export const THEME_COLORS = {
light: {
diff --git a/pages/api/realtime/update.js b/pages/api/realtime/update.js
index 15582f81..730219ae 100644
--- a/pages/api/realtime/update.js
+++ b/pages/api/realtime/update.js
@@ -2,6 +2,7 @@ import { useAuth } from 'lib/middleware';
import { ok, methodNotAllowed, badRequest } from 'lib/response';
import { getRealtimeData } from 'lib/queries';
import { parseToken } from 'lib/crypto';
+import { TOKEN_HEADER } from 'lib/constants';
export default async (req, res) => {
await useAuth(req, res);
@@ -9,7 +10,7 @@ export default async (req, res) => {
if (req.method === 'GET') {
const { start_at } = req.query;
- const token = req.headers['x-umami-token'];
+ const token = req.headers[TOKEN_HEADER];
if (!token) {
return badRequest(res);
diff --git a/pages/share/[...id].js b/pages/share/[...id].js
index 012e778a..ff5e4a6e 100644
--- a/pages/share/[...id].js
+++ b/pages/share/[...id].js
@@ -2,23 +2,23 @@ import React from 'react';
import { useRouter } from 'next/router';
import Layout from 'components/layout/Layout';
import WebsiteDetails from 'components/pages/WebsiteDetails';
-import useFetch from 'hooks/useFetch';
+import useShareToken from 'hooks/useShareToken';
export default function SharePage() {
const router = useRouter();
const { id } = router.query;
const shareId = id?.[0];
- const { data } = useFetch(`/api/share/${shareId}`, { disabled: !shareId });
+ const shareToken = useShareToken(shareId);
- if (!data) {
+ if (!shareToken) {
return null;
}
- const { websiteId, token } = data;
+ const { websiteId } = shareToken;
return (
-
+
);
}
diff --git a/redux/actions/app.js b/redux/actions/app.js
index 900be56d..f10d162a 100644
--- a/redux/actions/app.js
+++ b/redux/actions/app.js
@@ -19,6 +19,7 @@ const app = createSlice({
latest: null,
hasUpdate: false,
},
+ shareToken: null,
},
reducers: {
setLocale(state, action) {
@@ -33,10 +34,14 @@ const app = createSlice({
state.versions = action.payload;
return state;
},
+ setShareToken(state, action) {
+ state.shareToken = action.payload;
+ return state;
+ },
},
});
-export const { setLocale, setTheme, setVersions } = app.actions;
+export const { setLocale, setTheme, setVersions, setShareToken } = app.actions;
export default app.reducer;