OneDrive Integration

[aaryanvangari]

Web

Screenshots

Test Cases

Screenshots

Android Emulator

Screenshots

iPhone 13 Mini

Screenshots

[marcelklehr]

The failing "should not sync two clients at the same time" test indicates that locking doesn't work yet.

[Copilot]

Pull request overview

This pull request adds comprehensive OneDrive integration to Floccus, enabling bookmark synchronization via Microsoft OneDrive. The implementation follows the existing patterns established by the Google Drive adapter, with proper OAuth2 authentication using PKCE, file locking mechanisms, optional end-to-end encryption, and token caching for improved performance. The integration includes full UI support across web, Android, and iOS platforms, along with comprehensive test coverage.

Changes:

• Added complete OneDrive adapter with OAuth2 PKCE authentication, file operations, locking mechanism, and token caching
• Integrated OneDrive option into all UI flows (account creation, account options, native views)
• Added test cases and CI/CD configuration for OneDrive sync (encrypted and unencrypted)
• Enhanced crypto utilities with PKCE support and improved OAuth error handling

Reviewed changes

Copilot reviewed 25 out of 25 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/lib/adapters/OneDrive.ts	New OneDrive adapter implementation with OAuth2, file operations, locking, and encryption support
src/lib/adapters/GoogleDrive.ts	Renamed OAuthTokenError to GoogleOAuthTokenError for consistency
src/lib/Crypto.ts	Added PKCE code challenge generation utilities for OAuth2
src/lib/Account.ts	Registered OneDrive adapter in factory
src/lib/browser/BrowserAccount.ts	Added data.id assignment before adapter creation for token storage
src/lib/native/NativeAccount.ts	Added data.id assignment before adapter creation for token storage
src/errors/Error.ts	Added OneDrive-specific error types (authentication, OAuth, search)
src/ui/views/NewAccount.vue	Added OneDrive setup flow and configuration
src/ui/views/AccountOptions.vue	Integrated OneDrive options component
src/ui/views/native/Options.vue	Added OneDrive options to native view
src/ui/views/native/AddBookmarkIntent.vue	Added OneDrive icon mapping
src/ui/components/OptionsOneDrive.vue	New component for OneDrive-specific settings
src/ui/components/native/Drawer.vue	Added OneDrive icon to drawer
src/test/test.js	Added OneDrive test configurations and cleanup logic
test/selenium-runner.js	Added OneDrive test token configuration
onedrive-api.credentials.json	OneDrive OAuth credentials configuration file
google-api.credentials.json	Reformatted for consistency
gulpfile.js	Added OneDrive credentials file handling
android/app/src/main/AndroidManifest.xml	Added OAuth redirect intent filter
_locales/en/messages.json	Added OneDrive localization strings
README.md	Updated feature list to include OneDrive
fastlane/metadata/android/en-US/full_description.txt	Updated description to mention OneDrive
.github/workflows/tests.yml	Added OneDrive test configurations to CI
.github/ISSUE_TEMPLATE/bug_report.yml	Added OneDrive to adapter options
manifest.firefox.json	Removed invalid chrome_style property from browser_action

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[vbsampath]

The failing "should not sync two clients at the same time" test indicates that locking doesn't work yet.

The failing "should not sync two clients at the same time" test indicates that locking doesn't work yet.

[aaryanvangari]

OneDrive Setup

1. Open Microsoft Developer Console

Go to portal.azure.com

Portal Home

In this page you will find your account details on the top right and search bar in the top center.

On the left top we will find hamburger menu for extra entries

Look for App registrations

Once you are in portal home, find the search bar

Search for App registrations

New Registration

Under App registrations page

Click on New registration button

Create app

• Name: floccus
• Supported Account Types: Any Entra ID tenant + personal microsoft accounts
• Redirect URI:
  Single-page application - https://76a380c4950986998208e7bb9dbd8fea94c91504.extensions.allizom.org/

Note: You can add more redirect URI's later in app dashboard

App Dashboard

Here we will find tabs like Deactivate, Delete, Endpoints

More details of app like display name, application (client) ID, redirect URI's

On the left we find entries for Authentication, API permissions

Note: Copy application (client) ID as it needs to be produced in onedrive-api.credentials.json file

API Permissions

API/ Permissions Name	Type	Description	Admin consent required
Files.ReadWrite	Delegated	Have full access to user files	No
offline_access	Delegated	Maintain access to data you have given it access to	No
openid	Delegated	Sign users in	No
profile	Delegated	View users' basic profile	No
User.Read	Delegated	Sign in and read user profile	No

Find API permissions on the left menu

• Click on Add a permission
• Under Microsoft API's tab select Microsoft Graph
• Select Delegated permissions
• Under search bar search for below permissions and select them
• Once you are finished selecting permissions click on Add permissions

Public Client

On the left menu find Authentication (preview)

Goto Settings tab

Enable Allow public client flows

Turn it ON.
Otherwise Microsoft will reject token exchange.

Redirect URI

Platform Type	Redirect URI
Single-page application	https://djejpebekaoommcjfeaiipdikmdjkblg.chromiumapp.org/
Single-page application	https://gjkddcofhiifldbllobcamllmanombji.chromiumapp.org/
Single-page application	https://fnaicdffflnofjppbagibeoednhnbjhg.chromiumapp.org/
Single-page application	https://mbepccofdnoepgicagpchfmafecckdam.chromiumapp.org/
Single-page application	https://76a380c4950986998208e7bb9dbd8fea94c91504.extensions.allizom.org/
Mobile and desktop applications	org.handmadeideas.floccus://auth

Find the Authentication (Preview) on the left menu

• Click Add Redirect URI
• Select Single-page Application or Mobile and Desktop applications based on table above
• Enter the URL and click Configure
• Repeat above steps for all URI's from above table

Branding

On the left menu find Branding & Properties

Add branding information for the app like

• Logo
• Homepage
• Privacy url
• Terms of service url
• Publisher information