- Fork the repo spencerwooo/onedrive-vercel-index.
site.config.jsto your Microsoft account email address.
site.config.jsto a folder under your OneDrive root directory.
- Optional - Check if you need to change
- Import to Vercel and add an Upstash integration, which imports
REDIS_URLenv var to Vercel.
- Trigger a redeploy, and 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 (for real now!)
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.
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.
Some basic configuration modifications are required. Two config files include
config/api.config.js. The former is for customising your website, and the latter is for configuring API routes.
Customise site settings
config/site.config.js 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
Publicin your OneDrive to keep things same with the main project.)
There are other optional configs for customising your site, please refer to Custom configs for what they do.
Modify API settings (optional)
- 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
otherwise, and only if you must !!!
OneDrive 世纪互联 users have different API routes than what we usually use, you need to change
Change them to:
authApi: "https://login.partner.microsoftonline.cn/common/oauth2/v2.0/token", driveApi: "https://microsoftgraph.chinacloudapi.cn/v1.0/me/drive",
OneDrive business, education accounts and E5 subscription accounts need to confirm whether they have admin privileges, proceed with untouched
config/api.config.jsand 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
clientSecretas 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. Change:
- Build command to
- Install command to
Then hit deploy. Vercel will automatically build and deploy your project. However, 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
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 which should look like:
if you enabled TLS (SSL) on your upstash database.
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.)
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
Check for anything incorrect about your defined configurations. Especially
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.config.js and redeploy on Vercel.
Step 2 - Get auth code
config/api.config.js 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
If you are having privilege issues with your account, you may need to use your own
authentication. This may happen to OneDrive education or business users. More on this here: Using your own client id
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
refresh_token. Click on Get tokens to proceed.
Step 3 - Get access and refresh tokens
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
config/site.config.js, 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.