Navigation issue

A S · 2025-04-21T05:31:54.923+00:00

I'm working on implementing authentication on the dashboard page following the tutorial. The login itself works, but after logging in, it's unable to fetch the user data properly. The auth me API isn't able to autofetch.The bigger issue I'm facing is with the navigation menu highlighting. I'm trying to highlight the active nav item based on the current page using attributes and class bindings. However, as you can see in the screenshot, either all the menu items are highlighted or only the default page gets highlighted, regardless of which page is actually active.Could someone help me troubleshoot this?

A S
9 months ago
I'm working on implementing authentication on the dashboard page following the tutorial. The login itself works, but after logging in, it's unable to fetch the user data properly. The auth me API isn't able to autofetch.

The bigger issue I'm facing is with the navigation menu highlighting. I'm trying to highlight the active nav item based on the current page using attributes and class bindings. However, as you can see in the screenshot, either all the menu items are highlighted or only the default page gets highlighted, regardless of which page is actually active.

Could someone help me troubleshoot this?
✅1
Armand
9 months ago
For the user data, you could add an onPageload event to fetch the data.

For the nav menu, you could use page parameters to determine which menu option should be highlighted
@Armand
For the user data, you could add an onPageload event to fetch the data.

For the nav menu, you could use page parameters to determine which menu option should be highlighted
A S
9 months ago
I tried loading on page, after login it is supposed to go to the reports page. When I run the login API in editor it works but the navigation is blocked but when I preview, after login nothing happens. In editor when I try to load data using auth me on reports page it says -

code
"ERROR_CODE_UNAUTHORIZED"
message
"Invalid token."

For the nav menu, do you have a tutorial, it will be a lot helpful.
@A S
I tried loading on page, after login it is supposed to go to the reports page. When I run the login API in editor it works but the navigation is blocked but when I preview, after login nothing happens. In editor when I try to load data using auth me on reports page it says -

code
"ERROR_CODE_UNAUTHORIZED"
message
"Invalid token."

For the nav menu, do you have a tutorial, it will be a lot helpful.
Armand
9 months ago
It is supposed to block it in the editor, this is on purpose. That way in the editor you always stay on the page you are editing.

I recommend to go through this entire tutorial: https://youtu.be/S_qwRBWbVPg?feature=shared&t=5578
(what you're looking for for the nav menu starts around 1:30h, but it is still highly recommended to watch all of it)
@A S
I tried loading on page, after login it is supposed to go to the reports page. When I run the login API in editor it works but the navigation is blocked but when I preview, after login nothing happens. In editor when I try to load data using auth me on reports page it says -

code
"ERROR_CODE_UNAUTHORIZED"
message
"Invalid token."

For the nav menu, do you have a tutorial, it will be a lot helpful.
Jay | DRAGXN
9 months ago
You have to login using the preview window in Toddle’s builder so it can store the cookie, otherwise open the application in another tab for testing.

Redirects don’t trigger in the builder, you’ll see “Navigation was blocked” so it doesn’t redirect you while developing. 🙂
Tod
9 months ago
Great energy @Jay | DRAGXN! Your continuous contribution to the toddle Community just made you advance to Community Level 3!
Bankydoo
9 months ago
this was very helpful for me as a toddle learner, still dont understand some bits but was excited to be able to replicate the construct. awesomely useful video
@Jay | DRAGXN
You have to login using the preview window in Toddle’s builder so it can store the cookie, otherwise open the application in another tab for testing.

Redirects don’t trigger in the builder, you’ll see “Navigation was blocked” so it doesn’t redirect you while developing. 🙂
A S
9 months ago
Thank you. Yes I understood that. As I mentioned I followed the course video suggested by @Armand . And I understand that redirects don't happen in editor preview. I checked by opening in a new tab itself. Still even after correct email and password, it didn't redirect.

According to video, I added the step of get session cookie storage to store the access token, but when I try to run the auth me API manually after login API, it's not working, saying error code unauthorized. Not sure what I am doing wrong.
@A S
Thank you. Yes I understood that. As I mentioned I followed the course video suggested by @Armand . And I understand that redirects don't happen in editor preview. I checked by opening in a new tab itself. Still even after correct email and password, it didn't redirect.

According to video, I added the step of get session cookie storage to store the access token, but when I try to run the auth me API manually after login API, it's not working, saying error code unauthorized. Not sure what I am doing wrong.
Jay | DRAGXN
9 months ago
Can you share your project with me so I can take a look? You can send it as a DM if you don't want it public.
@Jay | DRAGXN
Can you share your project with me so I can take a look? You can send it as a DM if you don't want it public.
A S
9 months ago
Sure
@A S
Sure
Jay | DRAGXN
9 months ago
For reference: Green = Add, Red = Remove, SS = Screenshot

SS1: You want to have a prevent default when submitting with forms so you can stop the browser's default behavior (like reloading the page).

SS2-SS3: After the success of your API, you set the cookie ✅ , but tried to add it again on the success of setting it, as shown in SS3 ❌.

SS4: On the /reports page you had the API running twice (once on load and once on the server). You can remove the on load if you have auto fetch on the API you don't need the on load.

Try that and let me know if it works! 🙂
👍1
@Jay | DRAGXN
For reference: Green = Add, Red = Remove, SS = Screenshot

SS1: You want to have a prevent default when submitting with forms so you can stop the browser's default behavior (like reloading the page).

SS2-SS3: After the success of your API, you set the cookie ✅ , but tried to add it again on the success of setting it, as shown in SS3 ❌.

SS4: On the /reports page you had the API running twice (once on load and once on the server). You can remove the on load if you have auto fetch on the API you don't need the on load.

Try that and let me know if it works! 🙂
A S
9 months ago
Thank you so much Jay! 🙂
@A S
Thank you so much Jay! 🙂
Jay | DRAGXN
9 months ago
Anytime! You got it working now?
A S
9 months ago
Yes it's working. Thank you so much.
🙌1
Tod
9 months ago
Great energy @A S! Your continuous contribution to the toddle Community just made you advance to Community Level 1!

Navigation issue

A S

Armand

A S

Armand

Jay | DRAGXN

Tod

Bankydoo

A S

Jay | DRAGXN

A S

Jay | DRAGXN

A S

Jay | DRAGXN

A S

Tod