Discord and Wagmi oAuth Starter Kit

This repository contains a Next.JS application, using Next.JS's create-next-app and is deployable on Vercel; moreover, it is used to connect the application to MetaMask using Wagmi and stores off-chain data into a PostgreSQL database using Supabase.

Getting Started

Step 1

Wagmi requires an infrastructure provider for connecting Web3 wallets to this applicaton (ie. MetaMask).

To leverage Wagmi, complete the following steps:

Sign-up and create an Alchemy account
Create an app
Copy and save the app's API key

Step 2

For managing application-specific data off-chain (ex. MetaMask wallet address), we use Supabase.

To use Supabase, complete the following steps:

Sign-up and create a Supabase account
Create a project
Copy and sve your Project's API Key and URL from your Supabase account's project settings
Complete Database Configuration

Step 3

To connect to a server, verify an accounts membership, and use Discord's API, complete the following steps:

Sign-up or log into Discord Developers
Create an application
Update your OAuth2 settings; specifically: redirects (ex. http://localhost:3000)
Using OAuth2's URL Generator, create a URL using scopes (ie. identify, email, and guilds) and your previously created Generated URL (ex. http://localhost:3000)
Copy and save your Application's Name and the generated OAuth2 URL

Note, add your production URL to your Discord Application's Redirects and update your production environment variable on Vercel using this OAuth2 URL. Also, be sure that the URL's response_type equals token (ex. response_type=token).

Step 4

Using your copy and saved Alchemy, Discord, and Supabase keys, complete the following steps to run this application:

Clone this repository
Copy .env.sample and rename it to .env
Update your environment variables file (.env) using your copy and saved key values
Run npm install and then npm run dev
View your landing page on localhost:3000

Deploying with Vercel (Optional)

Optionally, this application can be deployed using Vercel's Deploy Now:

Note, deploying to Vercel does not require any knowledge of Javascript, Next.js or software development; however, all required environment variables are needed to successfully deploy this application.

Environment Variables

The list of environment variables needed to run this application:

Variable	Description	Example
NEXT_PUBLIC_ALCHEMY_API_KEY	Alchemy API Key	`JHrf267hpy2bGYwznCRLLmqjM8OiZwud`
NEXT_PUBLIC_SUPABASE_URL	Supabase Project URL	`https://jqjacvbfijzddisqeapw.supabase.co`
NEXT_PUBLIC_SUPABASE_ANON_KEY	Supabase Project API Key	`eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImpxamFjdmJmaWp6ZGRpc3FlcW13Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2NzQ1ODM2NTIsImV4cCI6MTk5MDE1OTY1Mn0.UrJ16g55euh8mRftMIyt7pv4hj0SYGZKwGbUHj2I9oP`
NEXT_PUBLIC_DISCORD_NAME	Discord Application Name	`Sesame`
NEXT_PUBLIC_DISCORD_OAUTH2_URL	Discord Application OAuth2 URL	`https://discord.com/api/oauth2/authorize?client_id=1067253927890975117&redirect_uri=http%3A%2F%2Flocalhost%3A3000&response_type=token&scope=identify%20email%20guilds`

Database Configuration

To store data off-chain (ex. MetaMask wallet address), complete the following database configurations:

Create Wallets Table

Create a table for storing connected wallet data using the following schema:

Name	Type	Default Value	Is Nullable	Is Unique
wallet	text	Empty or Null	false	true
is_connected	boolean	false	false	false
is_verified	boolean	false	false	false
coupon_code	text	Empty or Null	true	false

Note, ensure that Row Level Security (RLS) is enabled.

Update Table Policy

In order to read and write data, create a database table Policy from your Supabase project's Authentication page (ex. https://app.supabase.com/project/<YOUR_PROJECT_ID>/auth/policies).

Contributing

Feel free to fork, submit pull requests and contribute.

Questions

If you have any questions, feel free to email me at: sergio.m.villasenor@gmail.com.

surgieboi/sesame-coding-assignment