Custom login user interface


#1

Hello everyone, I’m trying to develop a new Solid React application. For some days, I’ve been struggling with the idea of creating a custom provider login view, to improve the user interface, I don’t know if this is even possible with the solid-auth-client. I know you can create a custom login view, but once you click the button of login with a provider, instead of the popup of solid.community, having my own view. Does anyone know if this is possible??
Thanks in advance.


#2

I haven’t done it but am sure you can. I think you should look for the ‘default popup’ in solid-auth-client and see how that is passed. I think you can make your own as part of your app and pass that to solid-auth-client, maybe as part of the loginOptions passed to the login funciton?


#3

Hi @ivanpl98, certainly this is possible. In the end, all that’s needed is that you have a way of obtaining a URL to an identity provider (e.g. https://inrupt.net or https://solid.community), which you can then pass to solid-auth-client.

For more detail on that, see the tutorial on solidproject.org about authentication.

It also includes a link to an example that uses its own (ugly, but it proves the point) interface to select a provider - in this case, the interface is a plain text box in which the user can type the URL of their provider.


#4

Is it also possible to show a different login page (the one with username and password)? As it is possible to login via the command line, I’m pretty confident it is possible, but in your example it also forwards me to inrupt.net/login.


#5

The login page is provided by the Pod server, so it’s under control of the Pod provider. You can compare it to websites with “Connect to Facebook” buttons: if you click that, it will send you to Facebook, and if you’re not logged in to Facebook yet, you will end up at Facebook’s login screen.

(At least, that is the case for usual flow, which I think is WebID-OIDC - it might be that you use WebID-TLS on the command line? This is outside my area of expertise, but the exact method of login is chosen by the user, I think, so an app developer cannot force the login screen to look a certain way.)