update auth to work with MLTSHP

Author: spaceninja

.env.template

@@ -1,4 +1,4 @@
-GITHUB_CLIENT_ID="YOUR_GIHUB_APPLICATION_ID"
-GITHUB_CLIENT_SECRET="YOUR_GIHUB_APPLICATION_SECRET"
+MLTSHP_CLIENT_ID="YOUR_MLTSHP_APPLICATION_ID"
+MLTSHP_CLIENT_SECRET="YOUR_MLTSHP_APPLICATION_SECRET"
 NUXT_SECRET="YOUR_NUXT_SECRET"
 ORIGIN="YOUR_ORIGIN"

package.json

@@ -23,6 +23,7 @@
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
     "@sidebase/nuxt-auth": "^0.5.0-rc.0",
+    "@types/crypto-js": "^4.1.1",
     "eslint": "^8.2.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "^8.8.0",
@@ -37,6 +38,7 @@
     "stylelint-config-spaceninja": "^12.0.0"
   },
   "dependencies": {
+    "crypto-js": "^4.1.1",
     "next-auth": "^4.22.0"
   }
 }

pages/api-routes.vue

@@ -18,14 +18,14 @@
         />
         <APITableRow route="/signin" method="get" link="/api/auth/signin" />
         <APITableRow
-          route="/signin/:provider"
+          route="/signin/mltshp"
           method="post"
-          link="/api/auth/signin/github"
+          link="/api/auth/signin/mltshp"
         />
         <APITableRow
-          route="/callback/:provider"
+          route="/callback/mltshp"
           method="get & post"
-          link="/api/auth/callback/github"
+          link="/api/auth/callback/mltshp"
         />
         <APITableRow
           route="/signout"

pages/login.vue

@@ -2,7 +2,7 @@
 <template>
   <div>
     <p>Sign-In:</p>
-    <button @click="signIn('github')">Github</button>
+    <button @click="signIn('mltshp')">MLTSHP</button>
   </div>
 </template>
 

server/api/auth/[...].ts

@@ -1,4 +1,3 @@
-import GithubProvider from 'next-auth/providers/github';
 import { NuxtAuthHandler } from '#auth';
 
 export default NuxtAuthHandler({
@@ -8,11 +7,45 @@ export default NuxtAuthHandler({
     // Change the default behavior to use `/login` as the path for the sign-in page
     signIn: '/login',
   },
+  // @see https://next-auth.js.org/configuration/providers/oauth
   providers: [
-    // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
-    GithubProvider.default({
-      clientId: process.env.GITHUB_CLIENT_ID,
-      clientSecret: process.env.GITHUB_CLIENT_SECRET,
-    }),
+    {
+      id: 'mltshp',
+      name: 'MLTSHP',
+      type: 'oauth',
+      clientId: process.env.MLTSHP_CLIENT_ID,
+      clientSecret: process.env.MLTSHP_CLIENT_SECRET,
+      authorization: {
+        url: 'https://mltshp.com/api/authorize',
+        params: {
+          response_type: 'code',
+          client_id: process.env.MLTSHP_CLIENT_ID,
+        },
+      },
+      token: {
+        url: 'https://mltshp.com/api/token',
+        async request(context) {
+          const tokens = await getMltshpToken(context);
+          return { tokens };
+        },
+      },
+      userinfo: {
+        url: 'https://mltshp.com/api/user',
+        async request(context) {
+          const user = await getMltshpUser(context);
+          return user;
+        },
+      },
+      profile(profile) {
+        return {
+          id: profile.id,
+          name: profile.name,
+          image: profile.profile_image_url,
+          about: profile.about,
+          website: profile.website,
+          shakes: profile.shakes,
+        };
+      },
+    },
   ],
 });

server/utils/getMltshpToken.ts

@@ -0,0 +1,24 @@
+/**
+ * Get MLTSHP Token
+ * @see https://mltshp.com/developers
+ */
+const getMltshpToken = (context: any) =>
+  fetch(context.provider.token.url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body:
+      `grant_type=authorization_code` +
+      `&client_id=${context.provider.clientId}` +
+      `&client_secret=${context.provider.clientSecret}` +
+      `&code=${context.params.code}` +
+      `&redirect_uri=${context.provider.callbackUrl}`,
+  })
+    .then((response) => {
+      if (!response.ok) throw Error(response.statusText);
+      return response.json();
+    })
+    .catch((error) => ({ error }));
+
+export default getMltshpToken;

server/utils/getMltshpUser.ts

@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/extensions
+import generateMltshpAuthString from '~/utils/generateMltshpAuthString';
+
+/**
+ * Get MLTSHP User
+ * @see https://mltshp.com/developers
+ */
+const getMltshpUser = (context: any) => {
+  const userInfoUrl = new URL(context.provider.userinfo.url);
+  const userInfoPath = userInfoUrl.pathname;
+  const authString = generateMltshpAuthString(context.tokens, userInfoPath);
+  return fetch(context.provider.userinfo.url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Authorization: authString,
+    },
+  })
+    .then((response) => {
+      if (!response.ok) throw Error(response.statusText);
+      return response.json();
+    })
+    .catch((error) => ({ error }));
+};
+
+export default getMltshpUser;

utils/generateMltshpAuthString.ts

@@ -0,0 +1,60 @@
+import hmacSHA1 from 'crypto-js/hmac-sha1';
+import base64 from 'crypto-js/enc-base64';
+import * as crypto from 'crypto';
+
+interface TokenSet {
+  access_token: string;
+  secret: string;
+}
+
+/**
+ * Generate API Authorization String
+ * We must create a signed message for the API using the following:
+ *  - An API access token
+ *  - A UTC timestamp (in seconds)
+ *  - A nonce (random string between 10 and 35 characters long)
+ *    Note: Don't use the UTC timestamp as a nonce!
+ *  - Your request method (GET/POST)
+ *  - The host (mltshp.com)
+ *  - The port (443 for SSL)
+ *  - The API endpoint path (/api/sharedfile/GA4)
+ * @see https://mltshp.com/developers
+ */
+const generateMltshpAuthString = (
+  token: TokenSet,
+  path: string,
+  method = 'GET'
+) => {
+  const timestamp = Math.floor(Date.now() / 1000);
+  const nonce = crypto.randomBytes(20).toString('hex');
+
+  // NOTE: using port 80 due to a bug in the API.
+  // https://github.com/MLTSHP/mltshp/issues/567
+  const port = 80;
+
+  // Normalize the message.
+  // NOTE: The order, indentation, and linebreaks are important!
+  const normalizedString = `${token.access_token}
+${timestamp}
+${nonce}
+${method}
+mltshp.com
+${port}
+${path}
+`;
+
+  // Create a signature by taking the normalizedString and use the secret to
+  // construct a hash using SHA1 encoding, then Base64 the result.
+  const hash = hmacSHA1(normalizedString, token.secret);
+  const signature = base64.stringify(hash);
+
+  const authString =
+    `MAC token=${token.access_token}, ` +
+    `timestamp=${timestamp}, ` +
+    `nonce=${nonce}, ` +
+    `signature=${signature}`;
+
+  return authString;
+};
+
+export default generateMltshpAuthString;

yarn.lock

@@ -810,6 +810,11 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
+"@types/crypto-js@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@types/crypto-js/-/crypto-js-4.1.1.tgz#602859584cecc91894eb23a4892f38cfa927890d"
+  integrity sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==
+
 "@types/estree@*", "@types/estree@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
@@ -1780,6 +1785,11 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+crypto-js@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf"
+  integrity sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==
+
 css-declaration-sorter@^6.3.1:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz#630618adc21724484b3e9505bce812def44000ad"