solid.auth.trackSession doubt and Viade

Build a Solid App
1

¡Hi! I’m a student from the University of Oviedo and I’m working on a routes management app called “Viade” with my team.

This week we started to code and I tried to create the logic for a login page so I went by using the Make a solid app on your lunch break tutorial but I encountered some problems.

The first problem was that the popup.htm file didn’t do anything. I searched for a solution and saw that I had to use a link for the “const popupUri” in main.js (you can see the code in the image at the end of the post).

The second problem was that when I tried to log out, the page didn’t change the interface. I thought that the problem was that I wasn’t logging out, but it seems that I was logging out and the solid.auth.trackSession wasn’t changing the interface.

I read about that method and I understood that when the session state changes it is invoked, but for some reason, it only works when I log in and don’t works when I log out.

Here is the code:

main,js

main

The rest of the files are the same from the tutorial (I would add more pictures, but I’m a new user and I can’t do it).

Also, here’s the link for the viade app, we currently only have some documentation, but we will add the rest day by day.

Thank you for reading.

2

Hi @AnaGciaSchz and welcome, what gives you the code exemple of GitHub repo

solid.auth.trackSession(session => {
if (!session)
console.log(‘The user is not logged in’)
else
console.log(The user is ${session.webId})
})

Is it correct?

3

Hi @Smag0 :grin:

I used that code and it didn’t change the interface. However, I looked at the errors and warnings and It seems that I’m having an error on line 19 in the solid-auth-client.bundle.js:

errores
errores805×568 37 KB

It is the same file as in the tutorial. Maybe that’s why I can’t make my login page work properly

4

I’ve seen this issue a few times - it’s actually the subject of a few closed bugs in solid-auth-client. Maybe this helps?

The solution there is to update your webpack configuration if you’re using it. Details in the comments.

If you’re not adverse to using React, the React Generator is designed to scaffold a whole application wiring up all this stuff automatically for you (including layouts for private vs public, and handling login/logout for you)

1 Like
5

For my recent project, i use the version that you can find here https://github.com/scenaristeur/shighl/tree/master/dist/vendor,
Make sure you copy the bundle.js.map too at the same location as I see that you’ve got an error on it

6

Keep in mind that that tutorial is pretty old and doesn’t cover writing data to a Pod. For a more fundamental introduction to the concepts behind writing a Solid app, it might be a good idea to work your way through the documentation on solidproject.org first.

(And let me know if things are unclear there.)

1 Like
7

I tried to use it but I still receive the same “Cannot read property ‘importKey’ of undefined” and the “Error logging out” errors.

However, the “DevTools failed to parse SouceMap” error disappeared, so thank you for telling me that I needed the bundle.js.map file too :grinning:

8

I have not installed the library with npm, I’m using the .js file that the tutorial provided so I don’t have a webpack.common.config.js file to change (or maybe I can’t find where that configuration is).

And thank you for the generator, We are going to use React for Viade so you have helped us so much :grin: I’m going straight away to use it

1 Like
9

Yeah, they recommended me that tutorial, I’m going to try to do it :thinking:

1 Like