I am trying to set up Magic Link through Xano and SendGrid. I’ve got everything working but I have to get one final piece of the puzzle set up. I need to be able to extract the magic token from the user’s URL, and then can exchange that for an auth token with Xano.
Here’s the javascript code I have tried to get the token, but it’s not working:
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const token= urlParams.get(‘token’)
return token
You can also create a query variable that have the same name as the key you want to target in the URL. WeWeb will fill the value with the value from the URL.
Can you say a bit more about the api response with the token? Is it coming through in the URL or as the result of an api call? And are you using Xano as your backend?
@kyanaloe in the login action, are you getting the username and password from the previous Get Me action and then inputting them into the login action?
@Joyce is there another way to do it? I think that way is exposing a plain text password through the endpoint and could be a security issue.
Here’s the tutorial on how to create a forgot password flow with the Xano Auth plugin.
Let me know what you think! Feel free to critique. I would love to improve it where needed.
Re the question about exposing a plain text password through the endpoint when the user updates it, the password and confirm_password variables are protected by SSL when you send them to Xano, where they will be compared to make sure they are identical, then hashed and stored securely.
The tutorial is great … I’m still trying to figure out how to actually get the user logged in on WeWeb though.
In “Action 1: Login with the magic link” in the tutorial, this Xano endpoint responds with an auth_token.
WeWeb gets back this auth_token, but nothing happens. My user variable still is null, and accessToken, isAuthenticated, User is not populated.
In the tutorial, after this action, you are using the accessToken. Somehow that got populated for you, but it does not for me.
How do I get the user logged in in WeWeb?
I hope that makes sense what I am asking.
From what I can figure out, I think there needs to be another step that takes that auth_token and logs the user in…
This could (partially) be done using JS by setting the access_token of the Xano Auth Plugin, and then using a Fetch User action. However, this does not set the cookie: window.vm.config.globalProperties.$cookie.setCookie(ACCESS_COOKIE_NAME, accessToken);
EDIT: It looks like you can just set the cookie value in JS, so thats what I’ve done to populate the user.
@Joyce I’m still wondering if there is a better process though, or if there should be a Xano plugin action like “Populate User with Auth Token”
The logic is:
Action 1: login with the magic link (so user should be logged in then)
Action 2: because the user is logged in, they can update their password
Ah ok, something I didn’t mention in the tutorial (will add it!) is that you’ll need to test Action 1 before moving on to Action 2 to get the accessToken and populate the User.
Did you try that?
Not sure if I answered your question here
If not, could you record a short video to walk me through what you’re trying to do? Maybe I’m missing the point altogether!
I think I know what the error is … in Action 2 (Update the Password), for the Authorization header value, are you using the auth_token supplied from Action 1(Login with magic link)?
If so, thats the breakdown and what is not clear in the tutorial… The Xano Plugin Update Password Component in WeWeb is set up to pull the Authorization value from the Xano Auth Plugin accessToken variable. But, this variable is null when it is called. See image below.
So, the user needs to update the Authorization value in Action 2 if they are following along with your tutorial or it will not work because accessToken is null when it is called.
OR, if they do want to have the user logged in, then they will need to update the isAuthenticated, accessToken, user variables and cookie manually like I mentioned above.
If I have followed along correctly with the tutorial, after the user completes the update password step, the user is still going to need to login again on the login screen to access their private data .
Maybe this is a reason that the auth plugin should have a function like Fetch User that takes an auth_token as an input.
No, I am using the accessToken from the user tab which is not null if Action 1 went through ok.
Action 1 is login with magic link which literally logs in the user so the user should be authenticated and you should have access to their accessToken in the user tab.
I’ll record a video to make things a little clearer because the text-based tutorial is a beast and hard to follow!
