Ubisoft OAuth integration

app/.env.local.template

@@ -1,2 +1,4 @@
 NEXT_PUBLIC_API_URL=http://localhost
 NEXT_PUBLIC_ANALYTICS_ID=
+
+NEXT_PUBLIC_CLIENT_ID=<CLIENT_ID from api.trackmania.com>

app/components/common/UserDisplay.tsx

@@ -0,0 +1,45 @@
+import React, { useContext } from 'react';
+import { Button, message } from 'antd';
+import { AuthContext } from '../../lib/contexts/AuthContext';
+
+const LoginButton = ({ onClick } :{onClick: () => void}) => (
+    <Button type="primary" onClick={onClick}>
+        Login with Ubisoft
+    </Button>
+);
+
+const LogoutButton = ({ onClick } :{onClick: () => void}) => (
+    <Button
+        type="primary"
+        danger
+        style={{ marginLeft: '10px' }}
+        onClick={onClick}
+    >
+        Logout
+    </Button>
+);
+
+const UserDisplay = () => {
+    const { user, startAuthFlow, logoutUser } = useContext(AuthContext);
+
+    const onLogout = async () => {
+        try {
+            logoutUser();
+        } catch (e) {
+            message.error('Something went wrong while logging out.');
+        }
+    };
+
+    return user === undefined
+        ? <LoginButton onClick={startAuthFlow} />
+        : (
+            <div className="flex flex-row items-center">
+                {`Welcome, ${user.displayName}!`}
+                <LogoutButton
+                    onClick={onLogout}
+                />
+            </div>
+        );
+};
+
+export default UserDisplay;

app/components/landing/InfoCard.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable react/no-array-index-key */
 /* eslint-disable max-len */
 import React, { useState } from 'react';
-import {
-    Card,
-} from 'antd';
+import { Card } from 'antd';
 import DiscordButton from '../common/DiscordButton';
+import UserDisplay from '../common/UserDisplay';
 
 type InfoTab = 'welcome'|'howDoesThisWork'|'getInvolved';
 
@@ -89,6 +88,7 @@ const InfoCard = (): JSX.Element => {
         <Card
             className="w-full dojo-info-card"
             title="Welcome to TMDojo!"
+            extra={<UserDisplay />}
             tabList={tabList}
             activeTabKey={infoTab}
             onTabChange={(key) => {

app/components/maps/MapHeader.tsx

@@ -5,6 +5,7 @@ import { PageHeader, Button } from 'antd';
 
 import { MapInfo } from '../../lib/api/apiRequests';
 import { cleanTMFormatting } from '../../lib/utils/formatting';
+import UserDisplay from '../common/UserDisplay';
 
 interface Props {
     mapInfo: MapInfo;
@@ -28,10 +29,11 @@ const MapHeader = ({ mapInfo }: Props): JSX.Element => {
         <PageHeader
             onBack={() => router.push('/')}
             title="Replay viewer"
-            subTitle={cleanTMFormatting(mapInfo.name || '')}
-            // anchors need duplicate links for keyboard accessibility
-            extra={(
-                <>
+            subTitle={(
+                <div className="flex flex-row gap-4 items-baseline">
+                    {cleanTMFormatting(mapInfo.name || '')}
+
+                    {/* anchors need duplicate links for keyboard accessibility */}
                     <Link href={tmioURL}>
                         <a target="_blank" rel="noreferrer" href={tmioURL}>
                             <Button key="tm.io" type="primary">
@@ -49,8 +51,9 @@ const MapHeader = ({ mapInfo }: Props): JSX.Element => {
                     ) : (
                         <TmxButton />
                     )}
-                </>
+                </div>
             )}
+            extra={<UserDisplay />}
         />
     );
 };

app/lib/api/auth.ts

@@ -0,0 +1,73 @@
+import axios from 'axios';
+
+const getRedirectUri = () => {
+    if (typeof window === 'undefined') {
+        // Avoid some nextjs compilation errors regarding window being undefined
+        return undefined;
+    }
+    return `${window.location.origin}/auth_redirect`;
+};
+
+export const generateAuthUrl = (state: string): string => {
+    const url = 'https://api.trackmania.com/oauth/authorize';
+
+    const params = {
+        response_type: 'code',
+        client_id: process.env.NEXT_PUBLIC_CLIENT_ID,
+        redirect_uri: getRedirectUri(),
+        state,
+    };
+
+    return axios.getUri({ url, params });
+};
+
+interface AuthorizationResponse {
+    displayName: string;
+    accountId: string;
+}
+export const authorizeWithAccessCode = async (accessCode: string): Promise<AuthorizationResponse> => {
+    const url = `${process.env.NEXT_PUBLIC_API_URL}/authorize`;
+
+    const params = {
+        code: accessCode,
+        redirect_uri: getRedirectUri(),
+    };
+
+    // TODO: use custom axios instance with default config for withCredentials
+    const { data } = await axios.post(url, params, { withCredentials: true });
+
+    return data;
+};
+
+export interface UserInfo {
+    displayName: string;
+    accountId: string;
+}
+export const fetchLoggedInUser = async (): Promise<UserInfo | undefined> => {
+    const url = `${process.env.NEXT_PUBLIC_API_URL}/me`;
+
+    const hasSessionCookie = document.cookie
+        .split(';')
+        .filter((cookie) => cookie.trim().startsWith('sessionId='))
+        .length > 0;
+
+    if (!hasSessionCookie) {
+        return undefined;
+    }
+
+    try {
+        // TODO: use custom axios instance with default config for withCredentials
+        const { data } = await axios.post(url, {}, { withCredentials: true });
+        return data;
+    } catch (e) {
+        // TODO: find solution for being logged out on a server error?
+        return undefined;
+    }
+};
+
+export const logout = async (): Promise<void> => {
+    const url = `${process.env.NEXT_PUBLIC_API_URL}/logout`;
+
+    // TODO: use custom axios instance with default config for withCredentials
+    await axios.post(url, {}, { withCredentials: true });
+};

app/lib/contexts/AuthContext.tsx

@@ -0,0 +1,118 @@
+import { useRouter } from 'next/router';
+import React, {
+    createContext, useCallback, useEffect, useState,
+} from 'react';
+import {
+    authorizeWithAccessCode, fetchLoggedInUser, generateAuthUrl, logout, UserInfo,
+} from '../api/auth';
+import openAuthWindow from '../utils/authPopup';
+
+export interface AuthContextProps {
+    user?: UserInfo,
+    setUser: (user?: UserInfo) => void,
+    logoutUser: () => Promise<void>
+    startAuthFlow: () => void
+}
+
+export const AuthContext = createContext<AuthContextProps>({
+    user: undefined,
+    setUser: (user?: UserInfo) => {},
+    logoutUser: async () => {},
+    startAuthFlow: () => {},
+});
+
+export const AuthProvider = ({ children }: any): JSX.Element => {
+    const [user, setUser] = useState<UserInfo>();
+    const { asPath } = useRouter();
+
+    useEffect(() => {
+        updateLoggedInUser();
+    }, [asPath]);
+
+    const updateLoggedInUser = async () => {
+        const me = await fetchLoggedInUser();
+        if (me === undefined) {
+            setUser(undefined);
+        } else if (me?.accountId !== user?.accountId) {
+            setUser(me);
+        }
+    };
+
+    const startAuthFlow = () => {
+        // Generate and store random string as state
+        const state = Math.random().toString(36).substring(2); // 11 random lower-case alpha-numeric characters
+        localStorage.setItem('state', state);
+
+        // Remove any existing event listeners
+        window.removeEventListener('message', receiveAuthEvent);
+
+        openAuthWindow(generateAuthUrl(state), 'Login with Ubisoft');
+
+        // Add the listener for receiving a message from the popup
+        window.addEventListener('message', receiveAuthEvent, false);
+    };
+
+    const receiveAuthEvent = useCallback(async (event: any) => {
+        if (event.origin !== window.origin) {
+            return;
+        }
+
+        const { data } = event;
+        const { source, code, state } = data;
+        if (source !== 'ubi-login-redirect') {
+            return;
+        }
+
+        // We received a message from the auth window, remove this listener
+        window.removeEventListener('message', receiveAuthEvent);
+
+        if (code === undefined || code === null || typeof code !== 'string') {
+            return;
+        }
+        if (state === undefined || state === null || typeof state !== 'string') {
+            return;
+        }
+
+        const storedState = localStorage.getItem('state');
+        localStorage.removeItem('state');
+        if (storedState !== state) {
+            console.log(`Stored state (${storedState}) did not match incoming state (${state})`);
+            return;
+        }
+
+        try {
+            const userInfo = await authorizeWithAccessCode(code);
+            setUser(userInfo);
+        } catch (e) {
+            console.log(e);
+        }
+    }, [setUser]);
+
+    const logoutUser = async () => {
+        try {
+            await logout();
+            setUser(undefined);
+        } catch (e) {
+            // If error code is Unauthorized (so no user is logged in), set user to undefined
+            // This should only happen when manually deleting the session cookie
+            if (e.response.status === 401) {
+                setUser(undefined);
+            } else {
+                throw e;
+            }
+        }
+    };
+
+    return (
+        <AuthContext.Provider
+            value={{
+                user,
+                setUser,
+                logoutUser,
+                startAuthFlow,
+            }}
+        >
+            {children}
+        </AuthContext.Provider>
+    );
+};

app/lib/utils/authPopup.ts

@@ -0,0 +1,19 @@
+// https://dev.to/dinkydani21/how-we-use-a-popup-for-google-and-outlook-oauth-oci
+let windowReference: Window | null = null;
+let previousUrl: string | undefined;
+
+const openAuthWindow = (
+    url: string,
+    name: string,
+) => {
+    const windowFeatures = 'toolbar=no, menubar=no, width=600, height=700, top=100, left=100';
+
+    if (windowReference === null || windowReference.closed || previousUrl !== url) {
+        windowReference = window.open(url, name, windowFeatures);
+        windowReference?.focus();
+    }
+
+    previousUrl = url;
+};
+
+export default openAuthWindow;

app/pages/_app.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import Head from 'next/head';
-import HeadTitle from '../components/common/HeadTitle';
 import { SettingsProvider } from '../lib/contexts/SettingsContext';
+import { AuthProvider } from '../lib/contexts/AuthContext';
 import '../styles/globals.css';
 
 interface Props {
@@ -13,31 +13,33 @@ interface Props {
 const ANALYTICS_ID = process.env.NEXT_PUBLIC_ANALYTICS_ID;
 
 const App = ({ Component, pageProps }: Props): React.ReactElement => (
-    <SettingsProvider>
-        <Head>
-            {
-                ANALYTICS_ID && (
-                    <>
-                        <script async src={`https://www.googletagmanager.com/gtag/js?id=${ANALYTICS_ID}`} />
-                        <script
-                        // eslint-disable-next-line react/no-danger
-                            dangerouslySetInnerHTML={{
-                                __html: `
+    <AuthProvider>
+        <SettingsProvider>
+            <Head>
+                {
+                    ANALYTICS_ID && (
+                        <>
+                            <script async src={`https://www.googletagmanager.com/gtag/js?id=${ANALYTICS_ID}`} />
+                            <script
+                                // eslint-disable-next-line react/no-danger
+                                dangerouslySetInnerHTML={{
+                                    __html: `
                                         window.dataLayer = window.dataLayer || [];
                                         function gtag(){dataLayer.push(arguments);}
                                         gtag('js', new Date());
                                         gtag('config', '${ANALYTICS_ID}');
                                     `,
-                            }}
-                        />
-                    </>
-                )
-            }
-            <link rel="icon" href="/favicon.ico" />
-            <title>TMDojo</title>
-        </Head>
-        <Component {...pageProps} />
-    </SettingsProvider>
+                                }}
+                            />
+                        </>
+                    )
+                }
+                <link rel="icon" href="/favicon.ico" />
+                <title>TMDojo</title>
+            </Head>
+            <Component {...pageProps} />
+        </SettingsProvider>
+    </AuthProvider>
 );
 
 export default App;