# How to Authenticate With Spotify Using Auth0 🟢

## ❓ Why?

Lately I've been checking out [Auth0](https://auth0.com/). It's a platform that provides authentication and authorization solutions over a wide range of use cases. 

A feature that caught my attention was the social log in. You can set up your application to accept credentials and acces your account data from social platforms like Facebook, Twitter, Google and more. The feature extends to any platform that complies with the [OAuth](https://en.wikipedia.org/wiki/OAuth) specifications.

I thought it would be interesting to try this out with Spotify. I'll show you how I did it.

## 📺 Final Result

The final result is a web app which shows a login box and you can connect with your Spotify account. It will then show the name, email and picture from the account.

![Untitled 0.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921227406/WmKqRq5CO.gif)

## 💚 Spotify Developer

### Create a Developer Account

Before you can integrate Auth0 in the application you need to register your Spotify account as a Developer account.

You can do that at the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/). 

After you log in (if not already) and accept the terms you will be redirected to the dashboard.


![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921393673/nNQIO4EU1.png)

### Create a Spotify App

![Untitled 1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921409746/ETEf7Dbsp.png)

The app is created.

![Untitled 2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921416683/W8zm17ax-.png)

### Client ID and Secret

You will need the Client ID and the Client Secret from this app to connect with Auth0 app.

![Untitled 3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921441128/aC7faNYH7.png)

Hit "Show Client Secret".

**Do not share the Client Secret with anyone (only with the Auth0 app)**.

![Untitled 4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921448672/e2aSP2vVU.png)

## 🔐 The Auth0 Part

### Register

First, you'll need to register to [Auth0](https://auth0.com/).

Select a *Personal* type of account.

![Untitled 5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921459799/IM1pRZ4Yr.png)

### Create Your Application

You will need to create an application in the Auth0 dashboard.

Go to `Applications → Applications`

![Untitled 6.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921468776/wQbYuZVW7.png)

Hit "Create Application".

Select a name for your application. For mine I chose *Spotify Auth0*.

And make it a Single Page Web Application.

![Untitled 7.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921475479/VU1lcHRrV.png)

After you create it you will see some instructions on how to integrate Auth0 in your application. We will look into that later.

## 🙋‍♂️ Create The Spotify Social Connection

Next you will create the social connection.

Go to `Authentication → Social`


![Untitled 8.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921483913/349RmVvey.png)
Hit "Create Connection".

Search for "Spotify".

![Untitled 9.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921516260/BvCAoOSel.png)

Click on it.


![Untitled 10.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921547572/-C6yzfB4D.png)

Hit "Continue".

![Untitled 11.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921568718/nyJTHr3hy.png)

In **Client ID** you will add the Client Id from the Spotify App.

in **Client Secret** you will add the one from the Spotify App.

![Untitled 12.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921574835/dMX3tOqC6.png)

Hit "Create".

Then enable the connection for the app from Auth0.

![Untitled 13.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921597747/6O2YO-ZhH.png)

## 🧶 Update Spotify App

You need to add some info from Auth0 to the Spotify app.

Hit "Edit Settings".

![Untitled 14.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921606949/04O8oJTB3.png)

### Add a Redirect URL

You need to add in the Spotify app a redirect URL. The URL can be deduced from the Auth0 application you created earlier. 

![Untitled 15.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921618437/HPSwizuVo.png)

It is `https://<Domain>/login/callback`. 

In my case it is [`https://dev-t4oahv4f.us.auth0.com/login/callback`](https://dev-t4oahv4f.us.auth0.com/login/callback).

**Don't forget the `https://` or `http://` before the redirect URI.**

![Untitled 16.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921626321/VdpS4tokf.png)

Hit "Add" then "Save".

### Add Allowed Accounts

The account you used to create the Spotify App will have permisions to authenticate to it. If you want additional accounts to have access you need to add them in the "Users and Access" pannel.

![Untitled 17.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921633765/o6m0CtUox.png)

### Try the Spotify Social Connection

In the Spotify connection dashboard in Auth0 you can test the connection.

![Untitled 18.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921638673/MwfmcltWS.png)

An authorization page will open.

![Untitled 19.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921647193/_HOAv3UuI.png)

After you agree, a success page should appear.

![Untitled 20.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921663408/LpBbfA0Mqb.png)

If something went wrong then double check your settings.

**The redirect URL from Spotify needs to exactly match the one from the Auth0 app.**

## 🎨 The Web App

For this project I created a web app, but Auth0 allows integration with desktop, mobile and IoT apps as well.

The code for the app can be found here: [https://github.com/alexzaharia24/spotify-auth0](https://github.com/alexzaharia24/spotify-auth0)

### Implementation

I used **React**. 

Created the app using `create-react-app`.

### Integrating Auth0

I could lay out the steps here, but already detailed instrunctions can be found in the *Quick Start* section of your Auth0 Application.

![Untitled 21.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921676625/Zal24jAly.png)

## 🤝 That's It

![Untitled 22.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632921686993/tmL-XoFNe.png)

We're done!

## 🚚 Challenges & Caveats

- Had issues with redirect_uri. Solved by EXACTLY matching the redirect_uri from the request to the one in the spotify dev app ([https://stackoverflow.com/questions/32956443/invalid-redirect-uri-on-spotify-auth](https://stackoverflow.com/questions/32956443/invalid-redirect-uri-on-spotify-auth))
- I have no idea where the image is taken from. The shown picture is different than the one from the Spotify Account. I did some digging on a different account and the picture displayed was from [Gravatar](https://en.gravatar.com/). Really weird.
- You need to manually add the user to the spotify app in the dev dashboard. The default limit is 25 users. You can make a request for increasing the limit.

## **👋 Reach Out**

What do you think about Auth0? 

Let me know what you think in the comments or if you know where is the account picture taken from.

You can find me on **[Twitter](https://twitter.com/alexzaharia0)** and **[Github](https://github.com/alexzaharia24)**