Leta autologin bug fixes (#162)

* Format account before attempting login
* Refactor invalid account error handling
* Remove uneeded expiry cookie
* Renew cookie every 23h in a browser session

README.md

@@ -87,8 +87,7 @@ Mullvad Browser Extension requires the following permissions:
 
   **Optional**
 
-- `webRequest` to automatically login to Mullvad Leta (optional)
-- `webRequestBlocking` to automatically login to Mullvad Leta (optional)
+- `alarms` to automatically renew Mullvad Leta cookie (optional)
 
 _Permissions are automatically accepted when testing the extension._
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mullvad-browser-extension",
   "displayName": "Mullvad Browser Extension",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Improve your Mullvad VPN experience, in your browser.",
   "private": true,
   "engines": {

src/background/main.ts

@@ -1,7 +1,13 @@
 import { onMessage } from 'webext-bridge/background';
 
 import { addExtListeners } from '@/helpers/extensions';
-import { DataAccount, initLetaLogin, letaLogin, letaLogout } from '@/helpers/leta';
+import {
+  DataAccount,
+  getMullvadAccount,
+  initLetaLogin,
+  letaLogin,
+  letaLogout,
+} from '@/helpers/leta';
 
 // only on dev mode
 if (import.meta.hot) {
@@ -25,6 +31,22 @@ onMessage('leta-logout', () => {
   letaLogout();
 });
 
+// Alarm to refresh Mullvad Leta auth cookie
+// The cookie expires after 24h, so renewal is set for every 23h
+browser.alarms.create('leta-cookie-refresh', {
+  delayInMinutes: 1380,
+  periodInMinutes: 1380,
+});
+
+const refreshCookie = async (alarm: browser.alarms.Alarm) => {
+  if (alarm.name === 'leta-cookie-refresh') {
+    const account = await getMullvadAccount();
+    await letaLogin(account);
+  }
+};
+
+browser.alarms.onAlarm.addListener(refreshCookie);
+
 // `browser.cookies` operations are only available in the background context
 export const setCookie = async (cookie: browser.cookies._SetDetails) => {
   try {

src/components/LetaSettings.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, Ref, ref } from 'vue';
 import { NCard } from 'naive-ui';
 
 import Button from '@/components/Buttons/Button.vue';
@@ -8,32 +8,34 @@ import FeEye from '@/components/Icons/FeEye.vue';
 import FeEyeOff from '@/components/Icons/FeEyeOff.vue';
 import IconLabel from '@/components/IconLabel.vue';
 
-import { checkFormat, formatAccount, FormatType } from '@/helpers/account';
+import { checkAccountFormat, formatAccount, FormatType } from '@/helpers/account';
 import { closePopup } from '@/helpers/closePopup';
 
-import useLeta from '@/composables/useLeta';
+import useLeta, { ErrorMessage } from '@/composables/useLeta';
+
 import useConnection from '@/composables/useConnection';
 
 const { account, login, logout, loginError } = useLeta();
 const { connection } = useConnection();
 
-const invalidNumber = ref(false);
+const invalidAccount: Ref<ErrorMessage> = ref({ error: false, message: '' });
 const isAccountVisible = ref(false);
 const password = ref('');
 
 const connected = computed(() => connection.value.isMullvad);
 
 const handleLogin = () => {
   loginError.value = { error: false, message: '' };
-  invalidNumber.value = false;
+  invalidAccount.value = { error: false, message: '' };
 
-  const isValidNumber = checkFormat(password.value);
+  const isValidAccount = checkAccountFormat(password.value);
 
-  if (isValidNumber) {
-    invalidNumber.value = false;
-    login(password.value);
+  if (isValidAccount) {
+    invalidAccount.value = { error: false, message: '' };
+    const account = formatAccount(password.value, FormatType.clean);
+    login(account);
   } else {
-    invalidNumber.value = true;
+    invalidAccount.value = { error: true, message: 'Invalid account number' };
   }
 };
 
@@ -53,18 +55,20 @@ const accountString = computed(() => {
 <template>
   <n-card id="leta-settings" :bordered="false" class="mb-4">
     <div class="flex justify-between">
-      <h2 class="text-lg">Mullvad Leta Auto Login</h2>
+      <h2 class="text-lg">Mullvad Leta autologin</h2>
     </div>
 
-    <p>Enter your Mullvad VPN account number to automatically login to Mullvad Leta.</p>
+    <p class="pt-4">
+      Enter your Mullvad VPN account to automatically login when the browser starts.
+    </p>
 
     <div v-if="connected" class="pt-4">
       <div v-if="account === ''">
         <div class="flex">
           <input v-model="password" type="password" placeholder="Enter your account number" />
         </div>
-        <div v-if="invalidNumber" class="py-4 flex items-center">
-          <IconLabel text="The account entered is not a 16 digits number." type="warning" />
+        <div v-if="invalidAccount.error" class="py-4 flex items-center">
+          <IconLabel :text="invalidAccount.message" type="warning" />
         </div>
         <div v-if="loginError.error" class="py-4 flex items-center">
           <IconLabel :text="loginError.message" type="warning" />

src/composables/useLeta.ts

@@ -2,18 +2,17 @@ import { ref } from 'vue';
 import { onMessage, sendMessage } from 'webext-bridge/popup';
 
 import { DataAccount, MullvadAccount } from '@/helpers/leta';
-import { FormatType, formatAccount } from '@/helpers/account';
 import useStore from '@/composables/useStore';
 
 const { mullvadAccount } = useStore();
 const loginError = ref({ error: false, message: '' });
 
-type DataError = {
+export type ErrorMessage = {
   error: boolean;
   message: string;
 };
 
-onMessage<DataError>('login-error', async ({ data }) => {
+onMessage<ErrorMessage>('login-error', async ({ data }) => {
   const { message } = data;
   loginError.value = { error: true, message };
 });
@@ -22,7 +21,7 @@ onMessage<DataAccount>('login-success', async ({ data }) => {
   const { account } = data;
   loginError.value = { error: false, message: '' };
   // Save account to extension storage
-  mullvadAccount.value = formatAccount(account, FormatType.clean);
+  mullvadAccount.value = account;
 });
 
 const login = async (account: MullvadAccount) => {

src/helpers/account.ts

@@ -4,18 +4,22 @@ export enum FormatType {
   'hidden',
 }
 
-export const checkFormat = (value: string): boolean => {
-  const containsSixteenDigits = /^(\d[\s-]*){16}$/;
-  return containsSixteenDigits.test(value);
+export const checkAccountFormat = (value: string): boolean => {
+  // The string contains between 9 and 16 digits.
+  // It can also contain spaces or dashes but no other characters.
+  const regex = /^(?=(?:\D*\d){9,16}\D*$)[\d -]+$/;
+  return regex.test(value);
 };
 
 export const formatAccount = (accountNumber: string, type: FormatType) => {
   switch (type) {
     case FormatType.clean:
+      // Remove space and dashes
       return accountNumber.replace(/-|\s/g, '');
     case FormatType.hidden:
       return '•••• •••• •••• ••••';
     case FormatType.prettify:
+      // Add space every 4 chars
       return accountNumber.match(/.{1,4}/g)!.join(' ');
     default:
       return '';

src/helpers/cookies.ts

@@ -7,7 +7,7 @@ type CookieData = {
   isFPI: boolean;
 };
 
-export const setLetaCookies = (data: CookieData) => {
+export const setAuthCookie = (data: CookieData) => {
   const { expiry, accessToken, isFPI } = data;
 
   // Convert to required format:  UNIX epoch in seconds
@@ -30,30 +30,15 @@ export const setLetaCookies = (data: CookieData) => {
     value: accessToken,
   } as browser.cookies._SetDetails;
 
-  const expiryCookie = {
-    expirationDate,
-    firstPartyDomain,
-    name: `letaCookieExpiry`,
-    url: 'https://leta.mullvad.net',
-    value: expiry,
-  };
-
   setCookie(accessCookie);
-  setCookie(expiryCookie);
 };
 
-export const removeLetaCookies = (isFPI: IsFPI) => {
+export const removeAuthCookie = (isFPI: IsFPI) => {
   const firstPartyDomain = isFPI ? 'mullvad.net' : '';
 
   removeCookie({
     firstPartyDomain,
     name: 'accessToken',
     url: 'https://leta.mullvad.net',
   });
-
-  removeCookie({
-    firstPartyDomain,
-    name: 'letaCookieExpiry',
-    url: 'https://leta.mullvad.net',
-  });
 };

src/helpers/leta.ts

@@ -1,6 +1,6 @@
 import { sendMessage } from 'webext-bridge/background';
 
-import { removeLetaCookies, setLetaCookies } from './cookies';
+import { removeAuthCookie, setAuthCookie } from './cookies';
 import { checkFPI } from './fpi';
 
 export type MullvadAccount = string;
@@ -32,7 +32,7 @@ export const letaLogin = async (account: string) => {
     if (!response.ok) {
       const error =
         data.code === 'INVALID_ACCOUNT'
-          ? `Invalid account`
+          ? `Invalid account number`
           : `Server error, please try again later.`;
 
       sendMessage('login-error', { message: error }, 'popup');
@@ -44,7 +44,7 @@ export const letaLogin = async (account: string) => {
     const { expiry, access_token: accessToken } = data;
     const isFPI = await checkFPI();
 
-    setLetaCookies({
+    setAuthCookie({
       expiry,
       accessToken,
       isFPI,
@@ -56,7 +56,7 @@ export const letaLogin = async (account: string) => {
 
 export const letaLogout = async () => {
   const isFPI = await checkFPI();
-  removeLetaCookies(isFPI);
+  removeAuthCookie(isFPI);
 };
 
 export const initLetaLogin = async () => {

src/manifest.ts

@@ -29,15 +29,14 @@ export async function getManifest() {
       '256': './assets/icon.svg',
     },
     permissions: [
+      'alarms',
       'cookies',
       'management',
       'privacy',
       'proxy',
       'search',
       'storage',
       '*://*.mullvad.net/*',
-      'webRequest',
-      'webRequestBlocking',
     ],
     browser_specific_settings: {
       gecko: {