Enable Brave VPN feature flag by default on Desktop

[bsclifton]

Description

Before we can go live with VPN, we need to enable the feature by default. It's already live for iOS and Android

Currently, folks testing have to enable using brave://flags/#brave-vpn

We should enable VPN by default using Griffin (https://griffin.brave.com/)

Overall VPN Test plan

This area is a work in progress! It will continue to grow as we get closer to rollout

Pre-requisites

• Finish the Linking page (on accounts.brave.com) and deploy to all environments https://github.com/brave/account-brave-com/issues/24
• Push the Brave VPN SKU to Production (it's already in dev and staging)
• Add the "Link account" button on Android Allow linking Android purchased VPN to account.brave.com #21972
• Add the "Link account" button on iOS Allow linking iOS purchased VPN to account.brave.com brave-ios#5175
• Website???

Desktop

NOTE: VPN only available on macOS and Windows

• Original Desktop test plan Implement Brave VPN on Desktop #15804

1. VPN menu should show next to hamburger menu
2. Click the VPN button and it should show a promo
3. Click the promo and it should go to account.brave.com
4. Login to account.brave.com with a new account
5. Once signed in, click Plans on menu on left
6. Brave VPN should show as a product
7. Click Buy now for Brave VPN and complete checkout
8. You should now be able to click VPN menu (next to hamburger menu) and see a server list
9. Choose a server and connect
10. Verify you're connected by visiting https://whatismyipaddress.com/
11. You can switch profiles and verify the other profiles can connect also

• What checks are needed for Linux? - See https://bravesoftware.slack.com/archives/CC5SA8CCB/p1669218929305149 for recent suggestions of what to cover.

Mobile

• Using in-app-purchase on iOS or Android and linking https://github.com/brave/account-brave-com/issues/24

iOS

• Buying on desktop and redeeming on iOS Detect and store VPN state after sign-in brave-ios#4805

Android

• Buying on desktop and redeeming on Android Detect and store VPN state after restoring on account.brave.com #20374
• See test plan at Android using Desktop VPN credentials brave-core#14715

Known issues with the VPN service itself

Brave employees should have access to https://github.com/brave/support-guardian-vpn/projects/1

[MadhaviSeelam]

Verification PASSED using

Brave | 1.45.88 Chromium: 106.0.5249.91 (Official Build) beta (64-bit)
-- | --
Revision | fa96d5f07b1177d1bf5009f647a5b8c629762157-refs/branch-heads/5249@{#707}
OS | Windows 11 Version 21H2 (Build 22000.978)

New Purchase - PASSED

1. Install 1.45.88
2. Complete setup and purchase in staging environment (account.bravesoftware.com) using steps from https://bravesoftware.slack.com/archives/CC5SA8CCB/p1651597201141019?thread_ts=1651597077.189229&cid=CC5SA8CCB

Confirmed Brave VPN subscription was purchased and was able to use a Brave VPN defaulting to USA (West):

Ex1	Ex2	Ex3	Ex4	Ex5

VPN button UI

Theme support - PASSED

1. open brave://settings/manageProfile
2. change your theme color (connected/disconnected)
3. verified the VPN button adjusts its colors (background, text) accordingly

Ex1	Ex2	Ex3	Ex4

Dark & Light Brave colors support - PASSED

1. visit brave://settings/appearance
2. choose the opposite color (if Light, switch to Dark)
3. examine the various VPN UI elements and ensure they are legible
4. switch back to the opposite color, and do the same

Light theme

Ex1	Ex2	Ex3	Ex4	Ex5

Dark theme

Ex1	Ex2	Ex3	Ex4	Ex5

VPN button appearance - PASSED

VPN button - ON

1. open brave://settings/appearance
2. confirm Show VPN button is toggled to ON by default
3. open hamburger menu>>Brave VPN
4. verified Show VPN button in toolbar option available
5. right click VPN button
6. Hide VPN button in toolbar when VPN is green

step 1-2	step 3-4	step 5-6

VPN button - OFF

continued from above

1. toggle Show VPN button to OFF
2. confirmed the VPN button disappears from the toolbar in real-time
3. click hamburger menu>>Brave VPN
4. verified Show button in toolbar option available
5. restart Brave
6. confirmed it's still not shown
7. toggle Show VPN button back to ON
8. confirmed the VPN button is shown browser toolbar
9. click Hamburger menu>>Brave VPN
10. it shows Hide VPN button in toolbar option
11. right click VPN button and it shows Hide VPN button in toolbar option

step1-2	step 3-4	step 7	step 9-10	step 11

Brave VPN links redirect

VPN button dialog links - PASSED

1. right click on VPN button in the browser toolbar
2. click Send Feedback goes to https://support.brave.com/hc/en-us in NTP
3. click About Brave VPN goes to https://brave.com/firewall-vpn/ in NTP
4. click Manage my plan goes to https://account.brave.software/ in NTP

step 1	step 2	step 3	step 4

Hamburger flyout menu links - PASSED

1. click on the hamburger menu icon on the browser toolbar
2. navigate to Brave VPN
3. click Send Feedback goes to https://support.brave.com/hc/en-us in NTP
4. click About Brave VPN goes to https://brave.com/firewall-vpn/ in NTP
5. click Manage my plan goes to https://account.brave.software/ in NTP

step 1-2	step 3	step 4	step 5

VPN-button settings dialog - PASSED

1. click on VPN button in the browser toolbar
2. click settings icon
3. click Manage subscriptions goes https://account.bravesoftware.com/account/
4. click Contact technical support page opens the form
5. click About Brave VPN goes to https://brave.com/firewall-vpn/ in NTP

step 2	step 3	step 4	step 5

Post-purchase UX

Default region selection

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Click the VPN button (top right, next to hamburger button)
3. You should see a default region picked which is nearest to your location (based on timezone)
4. Select Country or region in settings to Windows OS settings (Australia)
5. Select Timezone for the region selected in step 4
6. Create another fresh profile and get set up with VPN
7. Click VPN button
8. Verify it shows the region close to where you picked (ex: Australia)

default region | Australia, UTC_10:00 Canberra,Melbourne,Sydney | new VPN profile | auto-detected region | IP/location details

Connecting/disconnecting - PASSED

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Click the VPN button (top right, next to hamburger button)
3. Enable VPN
4. Verify that Brave's VPN button lights up Green when connected
5. Visit https://www.ip2location.com/demo
6. The website should show you as being in the VPN region now 🎉
7. Check hamburger menu > Brave VPN and ensure toggle there shows as connected
8. Click the toggle (disconnect) in hamburger menu > Brave VPN
9. Verify that Brave's VPN button shows as gray when not connected
10. Visit https://www.ip2location.com/demo
11. You should be back in your regular region now

step 6	step 11

Active VPN connection when desktop is in sleep mode - PASSED

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Click the VPN button (top right, next to hamburger button)
3. Enable VPN
4. Verify that Brave's VPN button lights up Green when connected
5. Wait for device to go to sleep
6. Login back to destkop

Confirmed VPN is still connected

step 4	step 6

BraveVPN OS-config removal - PASSED

In-between clean-profile tests, you should remove the Settings->Network & Internet>>BraveVPN

1. Settings>>Network & internet>>VPN
2. Disconnect Brave VPN
3. Brave VPN>>Remove
4. Brave VPN is removed successfully

step 1-2	step 3	step 4	step 4

Creating a support ticket - PASSED

Steps:

1. set up VPN
2. click on the VPN button in the toolbar
3. click on the Gears icon
4. click on Contact technical support
5. enter your @brave.com email address (so they know it's a test)
6. complete the various fields
7. click on Submit
8. check with Shannon in the shared Guardian channel on Slack, and ensure the following fields have data:
   • email address
   • subject
   • issue details
   • VPN hostname (if connected)
   • app version
   • OS version (type)

Contact technical support	Support-form data

Edge cases and error states

Cancel plan - Not Implemented

Edit payment - Not Implemented

Expired credit card / credentials - FAILED

#22972

1. Complete the steps under Brave Premium login > Purchasing VPN with a new account, making sure to specify the current month and year for the credit card's expiration date
2. confirm you can connect to your new Brave VPN account
3. open Date & Time in System Preferences and advance the OS date to the 1st of next month
4. connect to Brave VPN
5. confirm you get the Edit your payment dialog

card details	system clock	cc expiration	VPN-button dialog

### Can't connect to server UI -

1. Complete the steps under Brave Premium login > Login to an existing account which has VPN
2. Unplug your network cable (or disable Wi-Fi)
3. Click the VPN button (top right, next to hamburger button)
4. Click the toggle to ENABLE
5. You should see the error about not being able to connect
6. Plug network cable back in OR enable Wi-Fi (disabled in step 2)
7. Click the Try again button
8. Confirm you can reconnect

actual (fails)	Figma	after restart (works)

Limit of 5 VPN-connected devices/profile, on the same account (email address) -

Follow steps from https://bravesoftware.slack.com/archives/CC5SA8CCB/p1651597201141019?thread_ts=1651597077.189229&cid=CC5SA8CCB, using the same email address for each. Ensure you can use each VPN instance successfully (and concurrently) for devices/profiles 1-5.

Win Desktop 1	Win Desktop 2	device 3	device 4	device 5

Security & privacy

DNS leak (ISP) - PASSED

1. connect to any region ( US- West)
2. load https://browserleaks.com/dns
3. confirm your local (ISP) DNS resolvers are not shown; they should be from the connected VPN region
4. disconnect from VPN
5. reload https://browserleaks.com/dns
6. confirm your local (ISP) DNS resolvers are shown

BraveVPN DNS resolvers	local ISP resolvers

DNS-over-HTTP (DoH) - PASSED

1. connect to VPN
2. enable DNS over HTTP using any provider, via brave://settings/security
3. load browserleaks.com/dns
4. confirm the provider's resolvers are shown (NOT your local ISP's)

step 2	step 3-4	step 2	step 3-4

TOR - PASSED

1. connect to VPN
2. open a New Private window with Tor
3. load check.torproject.org
4. ensure you see Congratulations. This browser is configured to use Tor

Torrent (via WebTorrents support) - PASSED

1. run through the Shared VPN-Setup Steps section
2. disconnect from BraveVPN
3. load https://ipleak.net/
4. click on Activate under Torrent Address detection
5. click on this Magnet Link (it'll open in a new window)
6. reload the URL (to work around a bug)
7. click on Start Torrent
8. return to the https://ipleak.net/ tab
9. confirm that you see your public (local ISP) IP address
10. connect to BraveVPN via your preferred method (flyout menu, button toggle, and Network control panel in settings)
11. shift + reload the page (to purge cache) <------ IMPORTANT
12. repeat steps 4-8
13. confirm you now see the appropriate VPN IP address (for your region)
14. switch to another region (for bonus points)

step 1	step 2	step 4	step 7	step 9	step 13 - USA (West)	step 14 - UK

WebRTC - PASSED

1. connect to BraveVPN
2. load https://browserleaks.com/webrtc
3. iterate through the values for WebRTC IP handling policy
4. note the absence/presence and value of both local + public IP addresses, as reflected by their respective setting

VPN connected

Default	Default public and private interfaces	Default public interface only	Disable non-proxied UDP

Disconnected from VPN

Default	Default public and private interfaces	Default public interface only	Disable non-proxied UDP
	<

desktop -> desktop credentials linking - PASSED

machine 1

1. install latest beta
2. launch Brave
3. open brave://flags
4. set/ensure Enable experimental SKU SDK is Enabled
5. set/ensure Enable experimental Brave VPN is Enabled
6. click on Relaunch
7. confirm the VPN button appears in the toolbar
8. load account.bravesoftware.com
9. enter basic auth (in 1PW), click Sign In
10. enter a new test/throwaway email address, e.g. something-unique-here@mailinator.com
11. click on the Get login link button
12. Check for a confirmation email (for e.g. but use your own: https://www.mailinator.com/v4/public/inboxes.jsp?to=something-unique-here) and click either the embedded Confirm your access button or the link
13. confirm the tab opens https://account.bravesoftware.com/account
14. click on Browse plans
15. on https://account.bravesoftware.com/plans/, scroll down to Brave VPN Subscription, and click on Buy now
16. confirm you are taken to a Stripe checkout page, similar to https://checkout.stripe.com/pay/cs_test_b...
17. fill out valid test data for all fields, using https://stripe.com/docs/testing#cards
18. click Subscribe
19. click the VPN button in the toolbar
20. toggle from Disconnected to Connecting...
21. click Allow to accept the VPN configuration (macOS only)
22. click again on the VPN button
23. toggle from Disconnected to Connecting...
24. confirm via various methods that you are truly VPN-connected 🎉

Win Desktop 1	OS VPN Config	ex1	Fiddler logs

machine 2

1. install latest beta
2. launch Brave
3. open brave://flags
4. set/ensure Enable experimental SKU SDK is Enabled
5. set/ensure Enable experimental Brave VPN is Enabled
6. click on Relaunch
7. confirm the VPN button appears in the toolbar
8. load account.bravesoftware.com
9. enter basic auth (in 1PW), click Sign In
10. enter the same email address you purchased VPN with, on machine 1
11. click on the Get login link button
12. check for a confirmation email and click either the blurple Log in to Brave button or the link below it
13. confirm you land on https://account.bravesoftware.com/account/
14. click on the Refresh Brave VPN button
15. confirm you see YOU HAVE ACTIVE CREDENTIALS LOADED! messaging
16. click on the VPN button on the toolbar
17. toggle Brave Firewall & VPN from Disconnected to Connected
18. click on the Allow button when prompted by macOS or Windows to add the Brave Browser Beta VPN configuration
19. confirm you see all visible Connected indicators and states:
    • green VPNstatus indicator in theVPN` button, main toolbar
    • OS-appropriate system-level network config added and active
    • clicking on "hamburger" menu -> Brave VPN -> VPN should show Connected toggle state/status
20. confirm via various methods[0] that you are truly VPN-connected 🎉

[0] wireshark, Charles Proxy, Fiddler (Everywhere) etc.

Win Desktop 2	OS VPN Config	Ex1

Auto-Renewal

1. Login to VPN with an existing account created couple of months ago - vpn-test-1028@mailinator.com
2. Click Edit Payment link on the Subscription page
3. Confirmed Invoice history shows Nov 28, 2022 billing entry along with original billing entry Oct 28, 2022

Encountered following:

• Follow up of # 23081 - VPN can't be reconnected in the same session when internet/wifi is disconnected and reconnected #24331
• Incorrect error dialog used when credentials fail #22972
• https://github.com/brave/account-brave-com/issues/39
• Credentials expire for a new VPN account when system date is advanced on the client side #27391

[bsclifton]

Removed the 1.46 milestone; I'll look at moving the items here to #26355

Basically, we're going to want to switch to enabling this via Griffin first (see #26355). Once that's in good shape and we are live with customers, we can circle back and enable this by default

[MadhaviSeelam]

Verification PASSED using

Brave | 1.49.118 Chromium: 111.0.5563.50 (Official Build) (64-bit)
-- | --
Revision | 39f3dfc5023fe60997adc4f6cf5439cfa3e6968a-refs/branch-heads/5563@{#903}
OS | Windows 11 Version 22H2 (Build 22621.1265)

This testing particularly focused on desktop-->desktop linking. Purchased Brave VPN on desktop 1 and redeemed/logged in with same production VPN credentials on desktop 2. After enabling VPN flag and logged in, clicked Already purchased VPN? link in the VPN panel

Remove any previous VPN config in Win settings

1. login to account.brave.com with prod VPN credentials
2. click Already purchased VPN in the VPN panel
3. confirm it connects to BraveVPN
4. toggle from Connected to Disconnected
5. confirm it's now disconnected from BraveVPN
6. switched to different regions

Filed couple of issues:

• Brave crashes after linking desktop with existing VPN credentials and also fails with Failed to write the VPN config error #28940
• Can't connect to server error message shown when switched regions in the VPN panel when connected via Already purchased VPN link in desktop 2 #28941

example	example

[LaurenWags]

Closing per discussion in the release readiness meeting cc @rebron @kjozwiak @mattmcalister