Firebase Discord OIDC (Open ID)

Question

Been looking for a way to connect Discord Auth with Open ID I have done all the steps according to the Firebase Open ID documentated found: https://firebase.google.com/docs/auth/web/openid-connect?hl=en&authuser=0

I have found a similar Auth provider using OpenID to connect to Discord and they have a custom Issuer config as Discord does not provide a .well-known/openid-configuration per firebase documentation

Source: https://fusionauth.io/docs/lifecycle/authenticate-users/identity-providers/gaming/discord

The setup with Firebase OpenID is:

Code Flow

Discord

Client ID from Discord App

Issuer (URL): https://cdn.myproject.cloudflare.com/discord/ *see below

Client ID from Discord App

In Discord Dev portal under OAuth2 The redirects has

https://myproject.firebaseapp.com/__/auth/handler

*Issuer URL

https://cdn.myproject.cloudflare.com/discord/

points to public json data file named "openid-configuration" in a directory called ".well-known"

contents of issuer URL/.well-known/openid-configuration:

{
    "issuer": "https://discord.com",
    "authorization_endpoint": "https://discord.com/api/oauth2/authorize",
    "token_endpoint": "https://discord.com/api/oauth2/token",
    "userinfo_endpoint": "https://discord.com/api/users/@me",
    "scopes_supported": [
        "openid",
        "email",
        "profile"
    ]
}

this is enabled from my app with my other auth providers. Do I need to use a URL Generator for the Issuer URL or something else?

The simple fact is that Firebase does not allow custom Issuer URL overrides.

processing the auth request with both redirect and popup:

var provider = new firebase.auth.OAuthProvider('oidc.discord');
//firebase.auth().signInWithRedirect(provider)
firebase.auth().signInWithPopup(provider)
    .then((result) => {
        // IdP data available in result.additionalUserInfo.profile.
        var credential = result.credential;
        var accessToken = credential.accessToken;
        var idToken = credential.idToken;
    })
    .catch(console.log);

Error

FirebaseError: Firebase: The supplied auth credential is incorrect, malformed or has expired. (auth/invalid-credential).

Alternative per suggested answers: is to use OAuth2 within the browser by creating a custom Discord sign in link with response_type=token rather than response_type=code which yields a url with a hash as follows:

https://mycustomdomain.com/auth/redirect.html#token_type=Bearer&access_token=ty7QhLHdGNXnnHcnnR0eNIhALOf1w&expires_in=604800&scope=email

however this is only a decoded user profile and using:

URLSearchParams(window.location.hash.slice(1)); const [accessToken, tokenType] = [fragment.get('access_token'), fragment.get('token_type')];

to process the data does not provide a valid custom token for Firebase Auth as this data is from Discord OAuth not from Firebase Auth Handler with OpenID

firebase.auth().signInWithCustomToken(access_token)
    .then((userCredential) => {
        var user = userCredential.user;
        console.log('User', user)
    })
    .catch(console.log);

Error:

FirebaseError: Firebase: An internal AuthError has occurred. (auth/internal-error).

Answer 1

how I achieved this was (flow)

1-> On redirect url get auth token const fragment = new URLSearchParams(window.location.hash.slice(1)); const [accessToken, tokenType] = [fragment.get('access_token'), fragment.get('token_type')];

        if (!accessToken) {
            window.location.href('/')
        }
        fetch('https://discord.com/api/users/@me', {
            headers: {
                authorization: `${tokenType} ${accessToken}`,
            },
        })

2-> after getting access token use firebase auth with custom token to signIn/Signup

Answer 2

Use in on load event
const fragment = new URLSearchParams(window.location.hash.slice(1)); const [accessToken, tokenType] = [fragment.get('access_token'), fragment.get('token_type')]; then my previous code and i am providing here a direction . solution is specific to every project. follow documentation for step by step debug please