Hi, I’m developing an application with React, and I’m trying to use the ProviderLogin component of inrupt/solid-react-components as the way of authentication. I’ve managed to include this new component in the application as follows:
<ProviderLogin
callbackUri={`${window.location.origin}/home`}
theme={{
buttonLogin: 'ids-link',
inputLogin: '',
linkButton: ''
}}
/>
The login process seems to work, but the problem comes when I access the application after that, as the resources that should appear when a user is logged are still hidden. After seeing that, I checked the current session of the user with this simply method:
async checkSession() {
auth.trackSession(session => {
if (!session)
console.log('The user is not logged in')
else
console.log(`The user is ${session.webId}`)
})
}
Nevertheless, even when the login process is done, the solid-auth-client session is still showing as null, just like if no login process had happened. Moreover, some other components, created as children of LoggedIn component of solid/react-components, aren’t shown following the same reasoning.
How are try trying to enforce the authentication in the app?
In the example generator app, we use a private layout, that all “authenticated” pages use. There we’re using a React Higher Order Component called withAuthorization, which handles the code for redirecting if not logged in or allowing the user if they are.
The withAuthorization HOC is part of the solid-react-components so you should be able to use that on any “authenticated” pages to control the access to them. Under the covers this is using trackSession as well.
I’ve been having a similar issue. Could it be something to do with localhost? Does solid-auth-client need a http(s) address to login? I’ll test it later.
Right now I’m using a popup-login option from solid-auth-client to enforce the authentication in the app together with components from react-components like LoggedIn or LoggedOut to hide and show different components depending on whether the user is authenticated or not.
I tried a few weeks ago with that PrivateLayout that you mentioned, but when I include it my Router component (which uses a HashRouter from react-router-dom because I need to publish the application in GitHub Pages) there must be some conflicts because all the contents in my page are totally hidden. I’ll test it deeper to check if I found a solution for that.
That’s an interesting option to check. Maybe the use of localhost when developing is the application. I’ll check later if there’s an option to solve it that way.