Back to Better Auth

Spotify

docs/content/docs/authentication/spotify.mdx

1.6.112.2 KB
Original Source
<Steps> <Step> ### Get your Spotify Credentials
To use Spotify sign in, you need a client ID and client secret. You can get them from the [Spotify Developer Portal](https://developer.spotify.com/dashboard/applications).

**Important:** Spotify no longer supports `localhost` as a redirect URI. You must use `127.0.0.1` for local development.

Make sure to set the redirect URL to `http://127.0.0.1:3000/api/auth/callback/spotify` in your Spotify Dashboard.

Consequently, ensure you access your local app via `http://127.0.0.1:3000` (not `localhost:3000`) so the browser URL matches the redirect URI exactly.

For production, you should set it to the URL of your application (must be HTTPS). If you change the base path of the auth routes, you should update the redirect URL accordingly.
</Step> <Step> ### Configure the provider
To configure the provider, you need to import the provider and pass it to the `socialProviders` option of the auth instance.

You must also ensure your environment variables use the correct loopback IP to match the redirect URI. Update your `.env` file:

```bash title=".env"
BETTER_AUTH_URL=http://127.0.0.1:3000
```

```ts title="auth.ts"  
import { betterAuth } from "better-auth"

export const auth = betterAuth({
    
    socialProviders: {
        spotify: { // [!code highlight]
            clientId: process.env.SPOTIFY_CLIENT_ID as string, // [!code highlight]
            clientSecret: process.env.SPOTIFY_CLIENT_SECRET as string, // [!code highlight]
        }, // [!code highlight]
    },
})
```
</Step> <Step> ### Sign In with Spotify
To sign in with Spotify, you can use the `signIn.social` function provided by the client. The `signIn` function takes an object with the following properties:

* `provider`: The provider to use. It should be set to `spotify`.

```ts title="auth-client.ts"
import { createAuthClient } from "better-auth/client"
const authClient =  createAuthClient()

const signIn = async () => {
    const data = await authClient.signIn.social({
        provider: "spotify"
    })
}
```
</Step> </Steps>