Trouble logging in with ProviderLogin

Build a Solid App Solid App Development FAQs
#1

I am using a very basic version of the ProviderLogin component to allow a user can login in with my WebApp. I have pretty much taken it as is from the generator without wrapping it in PanelBody, LoginPanel, etc:

<ProviderLogin
              selectPlaceholder={t('login.selectPlaceholder')}
              inputPlaholder={t('login.inputPlaholder')}
              formButtonText={t('login.formButtonText')}
              btnTxtWebId={t('login.btnTxtWebId')}
              btnTxtProvider={t('login.btnTxtProvider')}
              className="provider-login-component"
              callbackUri={`${window.location.origin}/welcome`}
              errorsText={{
                unknown: t('login.errors.unknown'),
                webIdNotValid: t('login.errors.webIdNotValid'),
                emptyProvider: t('login.errors.emptyProvider'),
                emptyWebId: t('login.errors.emptyWebId')
              }}
              theme={{
                buttonLogin: 'ids-link',
                inputLogin: '',
                linkButton: ''
              }}
            />
</PanelBody>

I can select a Provider to login with (Inrupt, Solid Community) but when I click login nothing happens. In my network console I see it is making the following requests/responses after I click login with solid.community selected as a provider:

https:// solid.community/.well-known/openid-configuration; 304 Not Modified

https:// solid.community/jwks: 304 Not modified

https:// solid.community/register: 404 Bad Request

Can someone tell me what am I missing?

#2

Are you running this on localhost or on a server somewhere? One idea is to make sure wherever it’s hosted is using https (not http). Localhost should work fine in Chrome, but it struggles if it’s hosted somewhere on http, as some of the dependencies like solid-auth-client will throw an error.

#3

Yes running on localhost with http so that could well be the issue so. Will confirm

#4

I upgraded to https but unfortunately the problem is still there. The ProviderLogin component works fine in the solid-react test app that I generated which I also run on localhost. I have tried to copy its use identically into my app. The only difference is that my app uses scala.js but this should not affect any of the fundamental behaviour.

I tested with a direct call to solid-auth-client login(idp) and it worked fine. So I analysed the requests to see what was being done differently. And the problem is with the call to https://solid.community/register. When made from the ProviderLogin the redirect_uris param is an empty string. But the call made from solid-auth-client contains the url for my calling app (https://localhost:3000). I tested the auth-client-login request replacing the uri with an empty string and this caused the 400 Bad Request error so this is the source of the problem.

So the question is why is the request_uris parameter being set as a blank string when called from my ProviderLogin component?