This is a Next.js project bootstrapped with create-next-app.
The project is a bare-bones app containing nothing more than what is required to do OAuth and a few examples of making authenticated requests.
View the live demo here: https://bungie-oauth-nextjs-example.vercel.app/
First, install the dependencies
npm installFirst, create an application at Bungie.net. here, specifically: https://www.bungie.net/en/Application. you may need to re-visit this ^ link after logging in, it tends to dump you at the site root after login.
Set up your project to look like this screenshot. Note that you can name the application whatever you want and the website can be whatever you want. But everything else needs to match this screenshot.
Next, in the root of this project create a new file called .env.local.
Copy the contents of .env.example into .env.local.
Reference the above screenshot to replace values in .env.local as follows:
NEXT_PUBLIC_BNET_API_KEY => API Key,
NEXT_PUBLIC_BNET_OAUTH_CLIENT_ID => OAuth client_id,
BNET_OAUTH_CLIENT_SECRET => OAuth client_id
Bungie's OAuth setup REQUIRES that you use https, even when developing locally. You CANNOT use http. Next.js does not supoort using https locally out of the box. To get https working locally we need to create and use a locally-trusted SSL certificate.
Follow these steps: (All commands should be run from the root directory of your project)
First install mkcert; a tool that we will use to create a locally-trusted SSL certificate.
brew install mkcert
Next create a "Certificate Authority" and add it's certificate to your system's trust store.
mkcert -install
Finally create an SSL Certificate for localhost
mkcert localhost
Verify that the two files localhost-key.pem and localhost.pem were created in the root directory of your project.
- IDFK if you know pls contribute
Run the development server:
npm run devand open https://localhost:3001 in your browser
A bunch of this code is directly copy/pasted from DIM. Thank you DIM devs :)