Having some issues regarding a custom email flow and how to decode users on the backend.
see flow:
user: (webapp)
enter email address and send request for a password reset
server:
generate oobCode using nodeJS SDK: admin.auth().generatePasswordResetLink(email);
send link in custom email to user
user: (webapp)
clicks link -> www.example.com?oobCode=XYZ
client SDK verify's token has not expired: firebase.auth().verifyPasswordResetCode("XYZ");
if valid send oobCode and new password back to server
Here is where the issue now occurs
I have sent the new password and the oobCode back to the server, below is the required functionality
server:
1. verify oobCode and get user uid
I see no methods to be able to decode this in the backend to verify the user how do I go about getting a user from this code on the backend? it seems we can generate but not decode
Try running this code to verify oobCode for password reset:
const passResetUrl = `https://identitytoolkit.googleapis.com/v1/accounts:resetPassword?key=${firebaseWebApiKey}`
return fetch(passResetUrl, { method: 'POST', body: JSON.stringify({ "oobCode": oobCode, newPassword: "newpass" }), headers: { "Content-Type": "application/json" } }).then(async (res) => {
const resJson = await res.json()
//const email = resJson.email
console.log(resJson)
return "ok"
}).catch((errVerifyingCode) => {
console.log(errVerifyingCode)
return "error"
})
The firebaseWebApiKey can be found in your web app's Firebase configuration.
If by decode you meant get user auth object then I don't think that's possible. Consider adding some sort of query param in your generated url that'll help your server identify the user.
If you verify the oob code on server instead of using Firebase Client SDK as shown above you'll get the user's email back in response.
Related
The Setup / Environment
Client: (React.js, vs code, axios)
POST request to backend server to set auth cookie.
On every refresh Ill verify the cookie by a GET request to the auth backend server.
Every axios call is done with the "withCredentials:true" property set.
Backend (.net 6 - miminal API app written in c# and visual studio 2022.)
Set the cookie to "httpOnly", "sameSite=none" and "secure".
What Works
I have tested the flow on Windows 10, 11 + Mac computer and here everythink works fine. The cookie is set and I can login to my app.
The setCookie header is present here.
The problem
When I try to login from my iPhone with the latest IOS 15.4 it is not working (though it should be supported according to this https://caniuse.com/same-site-cookie-attribute).
The cookie is not set and the "getcookie" request returns null and Ill return Unauthorized.
Code:
Frontend (React js):
//run "npx create-react-app iphone-cors-test-app" and add a useEffect hook in App component //like this.
useEffect(() => {
var urlToBackendService= "https://829f-217-211-155-130.eu.ngrok.io";
axios({
url: baseURL + '/setcookie',
method: 'post',
withCredentials: true,
data: {
Email: 'ineedhelp#please.com',
Password: 'loveu'
}
}).then(() => {
axios({
url: baseURL + '/getcookie',
method: 'get',
withCredentials: true
}).then((resp) => {
var cookieValue = resp.data;
console.clear();
console.log(`cookie value: ${cookieValue}`);
alert(`cookie value: ${cookieValue}`);
})
});
Backend (c# .net 6, visual studio 2022):
//.net core web api template > minimal api (no controllers) enable https.
using Microsoft.AspNetCore.Mvc;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddCors(options =>
{
options.AddDefaultPolicy(
builder =>
{
builder.WithOrigins("https://nameofmyreactapp.azurewebsites.net")
.WithHeaders("accept", "content-type", "origin")
.WithMethods("GET", "POST", "OPTIONS")
.AllowCredentials();
});
});
builder.Services.AddHttpContextAccessor();
var app = builder.Build();
app.UseHttpsRedirection();
app.UseCors();
app.MapPost("/setcookie", async ([FromServices] IHttpContextAccessor httpContextAccessor, LogonRequest logonRequest) =>
{
return await Task.Run<IResult>(() =>
{
//login user and get an accesstoken. set accesstoken to a httpOnly cookie.
var accessToken = "newly generated jwt access token";
httpContextAccessor.HttpContext!.Response.Cookies.Append(key: "accesstoken", accessToken, new CookieOptions
{
HttpOnly = true,
/*This should work with an iPhone with ios 15.4 (https://caniuse.com/same-site-cookie-attribute).*/
SameSite = SameSiteMode.None,
Secure = true
});
return Results.Ok();
});
});
app.MapGet("/getcookie", async ([FromServices] IHttpContextAccessor httpContextAccessor) =>
{
return await Task.Run<IResult>(() =>
{
var accesstoken = httpContextAccessor.HttpContext!.Request.Cookies["accesstoken"];
return string.IsNullOrEmpty(accesstoken)
? Results.Unauthorized()
: Results.Ok(accesstoken);
}
);
});
app.Run();
public record LogonRequest(string Username, string Password);
Screenshots:
setCookie request.
getCookie request.
Please help me.
UPDATE
If you want to test this with your phone I use ngrok. Sign up and follow directions. Download ngrok.exe and go to that folder in your terminal. Then start your backend localhost and type "ngrok http + your localhost address".
Example:
"ngrok http https://localhost:7200"
Then hit enter and you will get a public url to your localhost.
Replace the client axios url (urlToBackendService) with this new public url and publish your react app to to cloud (or create another ngrok user and do the same think for the client) or if you have browserstack account or if you have another idé how to test this.
I just want to clarify the solution here.
(Solution 2 is the best practice version here if you just want the short version)
Solution 1
I knew that it probably should work if my two sites where hosted on the same domain but since I was in early stages in development and I didnt want to create custom domains just yet, and I also had read documentation that interpreted that is should work anyways I continued with this solution.
So my first solution (which is not idéal since localstorage is not as safe as a secure httponly cookie) was to change my auth server to be able to receive accesstoken via headers and cookies, I also made sure to return tokens in the response so I could store the tokens in localstorage. Flow example:
login with username & password and send form to auth server.
Get tokens from auth server response and store in a local storage variable.
Send a request to auth server with accesstoken header provided by localstorage variable.
Solution 2 (Best practice version)
Cred to my fellow user #AndrewLeonardi and the original post from #RossyBergg which could confirmed what I expected, that it will work if I just put the two services on the same domain. I ended up with this solution:
AuthService url: https://auth.domain.se
Client url: https://domain.se
The httpOnly secure cookies was now working properly and I was able to get, set & remove the cookie in the auth server. The header & localstorage implementation from "Solution 1" could be removed.
I am creating React Native app using Expo and used its inbuilt Facebook.useAuthRequest to generate a response when a user logs in. When I create a response type of Token I am able to take this token and send it to my backend API that successfully uses it to get the user details.
However I had hoped to implement a response type of code and use this on the backend API generate the access Token and then request the user details - as I believe this is the most secure option when sending the code to my server.
The issue that I'm facing is that I keep getting an error when trying to formulate the requst to Graph API and I dont understand why:
error: {
message: 'Missing client_id parameter.',
type: 'OAuthException',
code: 101,
fbtrace_id: 'ARHcoh260kBwj7l9yDHjU-n'
}
I just want to confirm that I believe I have inserted all the correct information into the request, so I am unsure of why this error is saying its missing the cliend_id. Here is my request from my API server:
const { data } = await axios({
url: https://graph.facebook.com/v12.0/oauth/access_token? client_id=${appId} &redirect_uri=${redirectUri} &client_secret=${appSecret} &code=${code},
method: 'get',
});
I just want to confirm that the client_id I have taken from app id I created on the facebook developer page, as well as the client_secret, redirect is the https:// used in the initial request and the code is the code initially received in my client side request.
Thanks in advance for any suggestions :)
Just a quick update on this, I was ablel to reformat the request as I believe it had some errors in the spacing and I moved to using the .env files so now my request looks like this:
const redirectUri = {MY_REDIRECT URL};
const appId = process.env.FACEBOOK_CLIENT_ID;
const appSecret = process.env.FACEBOOK_CLIENT_SECRET;
const { data } = await axios({
url: `https://graph.facebook.com/v12.0/oauth/access_token?client_id=${appId}&redirect_uri=${redirectUri}&client_secret=${appSecret}&code=${code}`,
method: 'get',
});
It seems I have moved onto a new error with the following:
error: {
message: 'Invalid code verifier. Code verifier should be a cryptographically random string using the characters A-Z, a-z, 0-9, and the punctuation characters -._~ (hyphen, period, underscore, and tilde), between 43 and 128 characters long.',
type: 'OAuthException',
code: 1,
fbtrace_id: 'AQKIUad5RRCitb6m977fnFW'
}
I'm a bit stumped for what this means as I have checked and all my values appear correct. My only thought is if I need to do something with the code initially received on the client side?
Ok so I finally figures it out - the issue was the I wasn't sending the code_verifier along with my request to exchange the Auth Code for a token. I ended up sending this code_verifier to my API server then adding this to the request so it looked something like this:
FB.api(
'oauth/access_token',
{
client_id: appId,
client_secret: appSecret,
redirect_uri: redirectUri,
code_verifier: code_verifier,
code: code,
},
function (response) {
if (!response || response.error) {
console.log(!response ? 'error occurred' : response.error);
return;
}
var accessToken = response.access_token;
This then finally gave me the accessToken I was looking for that I can then use to exchange for user details server side.
... and the code_verifier is obtained from request.codeVerifier.
const [request, response, promptAsync] = Facebook.useAuthRequest(...
Good evening,
Im developing a web app in react where i wanted to use oidc-client-js to make authentication.
However,when i run this code below:
const userManager = new UserManager({
authority: "https://accounts.google.com/.well-known/openid-configuration",
client_id: "*myclientid*",
redirect_uri: "http://localhost:3000/projects",
});
const loginUser = (_) => {
userManager
.signinRedirectCallback()
.then((user) => {
alert(user);
})
.catch((error) => {
alert(error);
});
};
I get the Error: No state in response.
After some searching on this error i already tried to put the response_mode:'query' on the UserManager object but it didnt work out.
Thanks in advance.
I assume that this code is to handle the response (tokens) received from idp right?
if so, did you check the signin request? as part of the request, client needs to send state (in url) and idp returns the same state back to client, so that client side, it validates that it is receiving the response for the request the client is initiated (like a hand shake)
where ever you are initiating the sign in request, pass in state and verify the state value (some random 15 digit uuid) is being passed along with authroize request.
userManager.signinRedirect({ state: { bar: 15 } });
I am implementing JWT tokens for authentication.
I am not using any client-site framework like Angular or React. It is just EJS.
Step 1. I have an API developed that on successful login returns the token as shown on the picture below(I am using Postman for testing API):
API response with JSON
Step 2. I am then accessing the restricted route and passing along the Authorization header with token value, by inputing it manually in the Postman and it works just fine.
My question is WHERE and HOW do I save the returned token from the step 1 on the client, so that it is sent in the header on step 2.
I am novice to web-development and following the tutorials, but all the tutorials I found about implementing the JWT token are written for Angular or React when it comes to the client site.
Any help would be greatly appreciated.
Thank you!
First you must create the token with JWT :
const token=jwt.sign({
userId: user._id
},config.secret, {expiresIn: '24h'});
res.json({success:true,message:'Success', token:token, user: {username:user.username}});
Then in your front youcan save it into the localStorage
This will generate a unique key that you can implement in your header
After that in your routes when you want to check if there's a JWT in the header just make :
router.use((req,res,next)=>{
const token=req.headers['authorization'];
if(!token){
res.json({success:false, message:"No token provided"});
}
else{
jwt.verify(token, config.secret, (err,decoded)=>{
if(err){
res.json({success:false,message:"Token invalid: " + err});
}
else{
req.decoded=decoded;
next();
}
});
}
});
This is a middleware that will check if there's a JWT key in "authorization" header
Note that every route coming after this one are going to run this middleware.
Here You 'll find every details about JSON Web Tokens
EDIT
Here's how you could do with an AJAX request:
$("submit").click(function(){
$.ajax({
url : 'api/login,',
type : 'POST',
data : {login: $('#login').val(),password:$('#password').val()}
dataType : 'JSON',
success : function(data, statut){
localStorage.setItem('token',data.token) // assuming you send a json token
},
error : function(resultat, statut, erreur){
// whatever code you want
},
complete : function(resultat, statut){
}
});
});
Have an object where you store the token, if you want to keep the token after the user leaves so that he will remain connected as long as the token is valid, you can save it in the localStorage.
And when doing AJAX requests on client side, retrieve the token from your object of from localStorage and set the token in the Authorization header.
I'm writing a rule in Auth0 to trigger a verification email if a certain condition is met. To make the example small I have included the code which I am using to send the verification mail (I have removed out the unwanted code).
var url = 'https://myname.au.auth0.com/api/v2/jobs/verification-email';
var token = 'Bearer {{token}}'; //This is where the problem is how do I get the token
var userId = user.user_id;
request.post({
url: url,
headers: {
Authorization: 'Bearer {{token}}',
},
json: {
"user_id": user.user_ID
},
timeout: 5000
},
function(err, res, body) {
console.log(err);
console.log(res);
});
In the body I get the following error
{ statusCode: 400,
error: 'Bad Request',
message: 'Bad HTTP authentication header format',
errorCode: 'Bearer' }
I guess I need to pass in the access token or something like that in the header. How do I get this done?
I also saw the following article (https://auth0.com/docs/email/custom), however I'm not sure what secretToken is?
Starting from the bottom, the article (https://auth0.com/docs/email/custom) is aimed at users that want additional flexibility and use their own custom email handling. The secretToken on that example it's just to illustrate a possible - and very simple - way that their own custom email API could validate that they were being called from Auth0; in conclusion it would work almost as an API key.
If you only need to trigger a verification email through the system provided by Auth0 you're using the correct approach (Management API v2). You have more than one way to obtain a token that allows you to call this API:
Using the client credentials grant
Using the Auth0 Management API v2 Explorer
The second option would be the easiest to get started, but do take in consideration that there's a deprecation notice for that one.
Once you obtain the token, you also need to correctly pass it to the API. The code you showed may be only sample code, but make sure that you don't end up including the Bearer scheme twice, more specifically var token = 'Bearer {{token}}'; should instead just be var token = '{{token}}'; and then you would use the token variable when creating the HTTP header.
Just created the below empty rule that will get called when user tries to login and email is not yet verified and it works like a charm :D
function (user, context, callback) {
if (!user.email_verified) {
console.log("User is: " + user.user_id);
var ManagementClient = require('auth0#2.6.0').ManagementClient;
var management = new ManagementClient({
token: auth0.accessToken,
domain: auth0.domain
});
var new_userobj = {user_id:user.user_id};
management.sendEmailVerification(new_userobj,callback(new UnauthorizedError('Please click on the link in the email we have sent you to continue to login.')));
} else {
return callback(null, user, context);
}
}
I received the same error when using the wrong token, though for a different api call. I recreated your issue by using a user's access_token obtained by calling {{api-audience}}users/{{user_id}}. That token should look something like this: A1bCd2efg34IJkl5
Try using a client's access_token obtained by making this call:
curl --request POST \
--url https://{{domain}}/oauth/token \
--header 'content-type: application/json' \
--data '{
"client_id":"{{client_id}}",
"client_secret":"{{client_secret}}",
"audience":"{{audience}}",
"grant_type":"client_credentials"
}'
That token will be a full JWT.