This repository is a Next.js project that includes an example of Spotify OAuth implementation. This allows users to log in via Spotify, granting the application certain permissions to access Spotify data, such as reading the user's playlists.

• Next.js Spotify OAuth Example
  • Table of Contents
  • Installation
  • Getting Started
  • Environment Variables
  • Step-by-step Guide to Setup Spotify API Credentials
    • Step 1: Register Your App with Spotify
    • Step 2: Copy the Client ID and Client Secret
    • Step 3: Create .env.local file
    • Step 4: Add Environment Variables
  • Project Structure
  • API Routes
  • Contributing

To run this project, you will need to have Node.js and npm installed. If you don't have these installed, you can find instructions here.

1. Clone the repository:

   git clone https://github.com/your-username/your-project-name.git

2. Navigate into the project directory:

   cd your-project-name

3. Install the dependencies:

   npm install

To start the development server, run the following command:

npm run dev

Then, navigate to http://localhost:3000 in your browser.

Create an .env.local file at the root of your project and insert your environment variables:

SPOTIFY_CLIENT_ID=yourClientIDHere
SPOTIFY_CLIENT_SECRET=yourClientSecretHere
SPOTIFY_REDIRECT_URI=http://localhost:3000/api/spotify-callback

This project utilizes Spotify's API to create a musical experience. In order to get started, you'll need to register your app with Spotify to get the API Client ID and Secret.

1. Visit the Spotify Developer Dashboard.
2. Log in to your Spotify account, or create a new one if you don't have one.
3. Click on the 'Create an App' button.
4. Fill in the name and description for your app, then click 'Create'.
5. After your app is created, you will be redirected to a dashboard where you can see your Client ID and Client Secret.

1. In the Spotify Developer Dashboard, locate the Client ID and Client Secret.
2. Copy these credentials for the next step.

1. In your project root, create a new file named .env.local.
2. Open this file in a text editor.

In your .env.local file, add the following lines, replacing yourClientIDHere and yourClientSecretHere with the credentials you copied earlier.

Important: Never commit .env.local to version control. It is in the .gitignore for security.

The main folders and files in this project are as follows:

• pages/: Contains all the Next.js pages (React components).
• pages/api/: Contains Next.js API routes.
• components/: Contains reusable React components.

• GET /api/spotify-login: Redirects the user to Spotify's OAuth authorization page.
• GET /api/spotify-callback: Handles the callback from Spotify and exchanges the authorization code for an access token.

If you would like to contribute, please fork the repository and make changes as you'd like. Pull requests are warmly welcome.