Wanderer's Guide: API Auth Workflow Template

This is a basic template for how one can create an authorization pipeline with Wanderer's Guide's API.

Live Demo

Setup and Deploy Instructions (via Netlify)

There are various sites like Netlify, you could probably use GitHub pages w/ actions instead, I just found Netlify to be the easiest to setup.

1. Clone the repo:

   git clone https://github.com/Quzzar/wanderers-guide-api-auth-workflow-template.git
   

2. Within the main project folder, install dependencies:

   npm install
   

3. Setup Netlify project. There are a few ways to setup a project. I recommend importing as an existing GitHub repo.

   Once setup, every time you push new changes to your repo, it will automatically re-deploy your site.

   Now that your site has been deployed, you should have a generated link (which you can always customize later).

4. Acquire API credentials from Wanderer's Guide Create a new client under Account page.

   

   Instead of google.com, put the link to the oauthCallback netlify function for your deployed site (ex. https://my-site.netlify.app/.netlify/functions/oauthCallback).

   After creating, if you open the dropdown, you will now see a generated client ID and API key for your client.

5. Set environment variables in Netlify

   From your Netlify main site overview page go to Site settings > Build & deploy > Environment.

   Add the following environment variables, referencing the values you just generated on Wanderer's Guide.

   WG_API_KEY = <your API key>
   WG_CLIENT_ID = <your client ID>
   WG_AUTH_STATE = <optional string, see WGs API docs>
   VITE_BASE_URL = <the base URL of your netlify project (ex. https://my-site.netlify.app)>

   After adding these environment variables, you will need to re-deploy your site to apply these variables.

6. Optional - Add .env file for development.

   You can add a .env file to the main project folder and include the same values from the previous step in it.

7. Done!

   Your site should now work properly, as shown in the demo.

   If you're having any issues getting this template deployed and working, feel free to ask questions in our Discord server.