# Other OIDC Provider

If you are using an OIDC provider other than the ones for which we have [a specific guide](https://github.com/keycloakify/docs.oidc-spa.dev/blob/v6/providers-configuration/broken-reference/README.md), follow these general instructions to configure your OIDC provider.

{% hint style="warning" %}
Not every “OIDC provider” works with a browser-only (public) client.

`oidc-spa` requires **Authorization Code + PKCE** and **no client secret**.

Some “social login” providers (GitHub, Facebook, LinkedIn, …) don’t support PKCE. They force a client secret. That can’t work in a public client.

Use a real authorization server (Keycloak, Auth0, Microsoft Entra ID, Clerk, …). Federate the social providers through it.

Even some authorization servers have rough edges for public clients, they all claim to support them but in practice some don't. Example: [Dex doesn’t support PKCE yet](https://github.com/dexidp/dex/pull/3777).    

Bottom line: browser-side OIDC is less widely supported than backend OIDC. If your provider behaves oddly, [reach out on Discord](https://discord.com/invite/mJdYJSdcm4).
{% endhint %}

## Creating the Client Application

* Create a **Public** OpenID Connect client.
  * OpenID Connect clients may also be referred to as **OIDC clients** or **OAuth clients**.
  * The technical term for a public OIDC client is **Authorization Code Flow + PKCE**.
  * If provided with the option, **disable client credentials,** you do not need to provide a client secret to oidc-spa.
  * Some providers will ask you to select an application type and choose between Single Page Application (SPA), Web Application (or Web Server App), and Mobile App. **Select SPA**.
  * You may need to explicitly provide a Client ID, or it may be generated automatically. This is the `clientId` parameter required by oidc-spa.
* **Valid Redirect URIs**:\
  **<https://my-app.com/>** and **[http://localhost:\*\*\[\*\*5173](https://docs.oidc-spa.dev/docs/v9/providers-configuration/http:/localhost:**\[**5173)**]\(#user-content-fn-1)[^1]**/**
  * The trailing slash (`/`) is important.
  * If your app is hosted on a subpath (e.g., `/dashboard`), set:\
    **<https://my-app.com/dashboard/>** and **<http://localhost:5173/dashboard/>**
  * Port `5173` is the default for the Vite dev server; adjust as needed for your setup.
* **Valid Post-Logout Redirect URIs**:\
  Use the same values as the **Valid Redirect URIs**.
* **Web Origins**:\
  **<https://my-app.com>**, **<http://localhost:5173>**

## How Do I Find the `issuerUri`?

The issuer URI is not always clearly documented, it depends on the provider.

If you are given a Discovery URL like:

```
https://XXX/.well-known/openid-configuration
```

Then your `issuerUri` is:

```
https://XXX
```

If you suspect a URL might be the issuer URI but are unsure, append `/.well-known/openid-configuration` to it and open it in a web browser. If it returns a JSON response, then you have found your issuer URI!

## Scopes and Audience

Some OIDC providers require the client (`oidc-spa`) to explicitly request a specific **scope** or **audience** to issue a JWT access token.\
Unfortunately, the configuration varies significantly between providers.

For example:

* **Auth0** requires you to ["Create an API" and specify an audience](https://docs.oidc-spa.dev/docs/v9/auth0#creating-an-api).
* **Microsoft Entra ID** requires you to ["register an application" and specify a scope](https://docs.oidc-spa.dev/docs/v9/microsoft-entra-id#configuring-entra-id-to-issue-a-jwt-access-token).

[^1]: This is the default port that Vite dev server uses. Addapt to your setup to be able to run your app in localhost.&#x20;