👒

Getting started

TL;DR
  1. Fork the repo.
  1. Change userPrincipleName in site.json - your Microsoft account email when you log in during the OAuth process.
  1. Change baseDirectory in site.json - must be a folder present under your OneDrive. (You can also create a folder named Public in your OneDrive to keep things same with the main project.)
  1. Check if you need to change api.json - if you are a OneDrive international user, then you don’t need to do anything here.
  1. Import to Vercel and add an Upstash integration, which imports the REDIS_URL environment variable to Vercel, and trigger a redeploy.
  1. Profit.
The deployed onedrive-vercel-index will guide you through an authorisation process, and store the required tokens in the Redis database. That’s all there is to do!

Getting started

onedrive-vercel-index uses your OneDrive as a storage host, and displays the files, images, videos, songs, and documents stored inside your OneDrive for other people to preview and download.
Screenshots of onedrive-vercel-index on multiple platforms
Screenshots of onedrive-vercel-index on multiple platforms
onedrive-vercel-index is actually a template built with Next.js, which you can host on Vercel, Netlify, or other serverless platforms completely for free. Here’s how you would deploy your own onedrive-vercel-index completely from scratch.
⚠️
If you are updating from a project deployed before 2022, check out 🛹If you deployed before 2022.

Fork the repo

Fork the project to your own GitHub account, as you will be maintaining your custom version of this project with your own configurations.
Fork the repo to your own GitHub account
Fork the repo to your own GitHub account

Modify configs

Some basic configuration modifications are required. Two config files include config/site.json and config/api.json. The former is for customising your website, and the latter is for configuring API routes.

Customise site settings

Modify config/site.json according to your configs, where you must change:
  • userPrincipalName - used to verify your identity when doing OAuth. It is usually your Microsoft email address when you log into your OneDrive.
  • baseDirectory - the base folder shared using onedrive-vercel-index. You must make sure that the folder exists inside your OneDrive. (You can also create a folder named Public in your OneDrive to keep things same with the main project.)
You must change these two configs for your deployment to work
You must change these two configs for your deployment to work
☘️
There are other optional configs for customising your site, please refer to ⚙️Custom configs for what they do.

Modify API settings (optional)

If ...
  • You are a OneDrive international version user (not OneDrive Business or Education account, not SharePoint user, not Microsoft 365 E5 user), you can ignore this step and leave config/api.json untouched.
else, and only if you must !!!
  • SharePoint users(世纪互联用户)have different API routes than what we usually use, you need to change authApi and driveApi:
    • Change authApi and driveApi only if you are a SharePoint user
      Change authApi and driveApi only if you are a SharePoint user
      Change them to:
      {
        "authApi": "https://login.partner.microsoftonline.cn/common/oauth2/v2.0/token",
        "driveApi": "https://microsoftgraph.chinacloudapi.cn/v1.0/me/drive",
      }
      You also need to change directLinkRegex if you want to use proxied download functions. More on this in ❄️Proxied download (disabled).
  • OneDrive business, education accounts and E5 subscription accounts need to confirm whether they have admin privileges, proceed with untouched config/api.json and try the OAuth, if it does not work (telling you to sign in with an account with admin privileges), you then need to use your own clientId and clientSecret as the public one generated by me would not work on your account. More on this in ☄️Using your own client id and secret.

Import and deploy in Vercel

Import your forked onedrive-vercel-index GitHub project to Vercel. Vercel will automatically build the Next.js project, so please wait for deployment to finish.
Import the forked GitHub project into Vercel
Import the forked GitHub project into Vercel
The deployment is likely to fail as you have not added the environment variable REDIS_URL yet, which is what we are going to do now.

Create a Redis connection

Create a Redis database, and set the URL of the Redis instance to environment variable REDIS_URL inside the Vercel project. The Redis database is used for storing the required access_tokens and refresh_tokens when interfacing with OneDrive’s API.
  • You can use Upstash for this, completely free, full integration with Vercel, documentation here: Vercel Integration (ignore the final step Create Your Redis Client, that is already taken care of in onedrive-vercel-index).
  • You can also host any Redis server, use AWS, Google Cloud, Azure, etc. As long as you have a Redis URL that Vercel can use.
Whatever method you use, you should have a REDIS_URL present in your environment variable in Vercel.
Using Upstash as the free Redis database for onedrive-vercel-index
Using Upstash as the free Redis database for onedrive-vercel-index

Redeploy on Vercel

Finally, trigger a redeployment on Vercel to use the new environment variable, navigate to the newly deployed page, and perform authorisation as guided by onedrive-vercel-index. The domains used by Vercel are listed in your project settings. You can also configure a custom domain here. (More on this in 🏈Custom domain.)
Checking the deployed domain and navigate to the live site
Checking the deployed domain and navigate to the live site

Authenticate your onedrive-vercel-index

Navigate to your newly deployed onedrive-vercel-index, usually https://xxx.vercel.app if you have not set a custom domain. As you are not authenticated yet, you will be redirected to the OAuth process.

Step 1 - Preparations

Step 1 - preparing for authentication
Step 1 - preparing for authentication
Check for anything incorrect about your defined configurations. Especially client_id and client_secret (obfuscated), which should be exactly the same as the main project if you are using the public tokens for authentication. Also check for API scopes, we only require:
  • user.read: for checking your email against the account you use for OAuth, so that some random guy cannot f*ck you up by re-authenticating with his/her account over and over again.
  • files.read.all: for access to the files inside your OneDrive.
  • offline_access: for ... offline access ☺️
If everything seems correct, proceed to step 2. If not, you need to modify config/api.json and redeploy on Vercel.

Step 2 - Get authorisation code

Step 2 - getting the authorisation code
Step 2 - getting the authorisation code
Based on config/api.json we have generated the OAuth link for you. Click on the link, a new tab will open and prompt you to login into your Microsoft account. Make sure you login with the same account you defined in userPrincipalName under config/site.json.
⚠️
If you are having privilege issues with your account, you may need to use your own client_id and client_secret for authentication. This may happen to OneDrive education or business users. More on this here: ☄️Using your own client id and secret.
The localhost URL that you would be redirected to
The localhost URL that you would be redirected to
You will be directed to http://localhost, copy the entire URL in your address bar to the input section below. onedrive-vercel-index will extract the code from the URL and use that to acquire a pair of access_token and refresh_token. Click on Get tokens to proceed.

Step 3 - Get access and refresh tokens

Success! We have acquired the tokens that are needed
Success! We have acquired the tokens that are needed
Wait for a bit as the tokens need a bit to return. If all goes well, you would be greeted with this: success screen with a pair of valid tokens for you to store in your Redis database. Click on Store tokens to proceed.
📢
Here we will validate that whether you are actually you, so if the button says “Don’t pretend to be the site owner”, go change the userPrincipalName under config/site.json, which is definitely wrong.
Finally, you will be redirected home with your new and fresh onedrive-vercel-index. Enjoy!
⚠️
If you are redirected back to step 1, and you are certain that everything is setup correctly, wait for a bit and try navigating home manually and do a hard refresh. It sometimes take a while for the tokens to propagate through to Redis.
 
→ Next steps: ⚙️Custom configs