I have made a full stack application with a register activity successfully adding to db.
How would I conditionally render the home page dependent on if the login is correct.
In my login route I have an if statement which successfully logs "bad creds" if do not exist or "login: login successful.." if it does.
I added a redirect into the handle submit(this is triggered once the login form button is pressed) which was supposed to be triggered if successful (it technically is but it determines "bad creds successful as well").
I have attempted an if stametn but I am not sure how to use this with express middle ware.
the logic I would want the the portion of handle submit to do is something along the lines of
if (login successful){
window.location.href = "/home";
}
else {
window.location.href = "/login";
(preferably with a alert )
}
Login route
app.post("/login", async (req, response) => {
try {
await sql.connect(config);
var request = new sql.Request();
var Email = req.body.email;
var Password = req.body.password;
console.log({ Email, Password });
request.input("Email", sql.VarChar, Email);
request.input("Password", sql.VarChar, Password);
var queryString =
"SELECT * FROM TestLogin WHERE email = #Email AND password = #Password";
//"SELECT * FROM RegisteredUsers WHERE email = #Email AND Password = HASHBYTES('SHA2_512', #Password + 'skrrt')";
const result = await request.query(queryString);
if (result.recordsets[0].length > 0) {
console.info("/login: login successful..");
console.log(req.body);
req.session.loggedin = true;
req.session.email = Email;
response.send("User logined");
} else {
console.info("/login: bad creds");
response.status(400).send("Incorrect email and/or Password!");
}
} catch (err) {
console.log("Err: ", err);
response.status(500).send("Check api console.log for the error");
}
});
handleSubmit(e) {
e.preventDefault();
if (this.state.email.length < 8 || this.state.password.length < 8) {
alert(`please enter the form correctly `);
} else {
const data = { email: this.state.email, password: this.state.password };
fetch("/login", {
method: "POST", // or 'PUT'
headers: {
Accept: "application/json, text/plain, */*",
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
// .then(response => response.json())
.then(data => {
console.log("Success:", data);
// if ( ) {
// console.log("nice");
// } else {
// console.log("not nice");
// }
// window.location.href = "/home";
})
.catch(error => {
console.error("Error:", error);
});
}
}
catch(e) {
console.log(e);
}
You should have explained in the first place that you had a React app in the frontend. Talking at the same time about Express middleware and login route is a bit messy. :)
What you're doing is a login/sign in process through an API. This means your server should return JSON information regarding the login outcome. Then, your frontend should handle that in whatever way you want to. This means that your server should simply treat the login request as any other data request. Return a status code and some optional JSON data.
Authentication is a BIG subject and since you did't provide many details, I can only tell you how normally the overall process should go:
Send the user credentials to the server (like you do in your POST request)
Handle the response received from the server. If login was successful, you should receive some information from the server, like the user id, email, session id, either in the response JSON data or by HTTP headers. You should keep this information in the frontend, normally in localStorage, and use it for every request to the server to provide your identity. You should look up JSON Web Tokens.
In your React app, you want to check when starting the application if the user is already logged in or not (using the piece of information mentioned in step 2, or trying to fetch and endpoint that returns user information like /me). If you don't have that information or the request fails, redirect to Login.
In your React app, in your login page, handle the fetch result and redirect to home if the user is authenticated, or stay there and display whatever info you want.
I assume that since you're using user login some resources should be protected from being accessed by non logged in users or restricted depending on the logged in user. This is done with middleware on your Express server, that should check the user id / token / session id information your React app should be sending with every request.
To redirect using React Router, you don't want to use window.location. You want to use the Router itself to avoid reloading the full page. You can either use the injected history prop on your Login route component or wrap any component that needs it with withRouter HOC.
This article seem to lay out all options using React Router pretty well:
https://serverless-stack.com/chapters/redirect-on-login-and-logout.html
Hope this helps, this is a complex subject that you should split into smaller problems and tackle one at a time. ;)
Related
Is there is a way to know the if the reset password link (action link) sent by firebase as been used or expired when the user uses the link to go to the custom reset password page.
this.afAuth
.confirmPasswordReset(oobCode, new_password)
.then(() => this.router.navigate(['reset-success']))
.catch((err) => {
this.router.navigate(['error']);
});
According the way I did the user will be redirected to the reset password page.
I used the above call when the user submits the new password. Here if the firebase reset password link (action link) is used once or it is expired the user will be redirected to the error notification page.
this.code = this.route.snapshot.queryParams['oobCode'];
this.apiKey=this.route.snapshot.queryParams['apiKey'];
const headers = {
'Content-Type':'application/json',
}
const requestHeaders={
headers : new HttpHeaders(headers)
};
let requestOobCode = {
oobCode: this.code
}
let data = JSON.stringify(requestOobCode);
this.http.post<any>('https://identitytoolkit.googleapis.com/v1/accounts:resetPassword?key=' + this.apiKey + '', data, requestHeaders).subscribe(data => {
this.linkNotExpired = true;
}, error => {
this.router.navigate(['error-reset']);
})
Firebase REST API provides a method to validate the action URL . Here we have to send apiKey and oobCode of the action URL to the endpoint. If the oobCode valid and not expired will send a success response else will send error.
Refer the Documentation: https://firebase.google.com/docs/reference/rest/auth#section-verify-password-reset-code
Hi I am using express for backend authentication and these are my sign in functions/controllers on the front end.
export const signInUser = async credentials => {
console.log('this is for the signInUser', credentials)
try {
const resp = await api.post('/sign-in', credentials)
localStorage.setItem('token', resp.data.token)
return resp.data
} catch (error) {
throw error
}
}
onSignIn = event => {
event.preventDefault()
const { history, setUser } = this.props
signInUser(this.state)
.then(res => setUser(res.user))
.then(() => history.push('/Home'))
.catch(error => {
console.error(error)
this.setState({
loginUsername: '',
loginPassword: '',
})
})
}
setUser = user => this.setState({ user })
and this is my sign in controller on the backend
const signIn = async (req, res) => {
try {
console.log('hello' ,req.body);
const { loginUsername, username, loginPassword } = req.body;
const user = await User.findOne({
where: {
username: loginUsername
}
});
console.log('this is the user', user)
if (await bcrypt.compare(loginPassword, user.dataValues.password_digest)) {
const payload = {
id: user.id,
username: user.username,
password: user.password
};
const token = jwt.sign(payload, TOKEN_KEY);
return res.status(201).json({ user, token });
} else {
res.status(401).send("Username or Password is invalid- try again.");
}
} catch (error) {
return res.status(500).json({ error: error.message });
}
};
The issue is the state of the user doesn't persist on refresh but I still have the json webtoken in my local storage and this is an issue when I make post requests and even signing up since I am redirecting to the home page and losing the user state. Any help would be appreciated!
From your tags, I noticed that you are using React, so the solution is simple!
you can have an GlobalAuthManager context for your application that would wrap all the components at the most higher level! after <React.strictMode> like below:
<React.StrictMode>
<GlobalAuthManager.Provider value={{authData}}>
<App />
</GlobalAuthManager.Provider>
</React.StrictMode>
As you might guess, this would be a context! that would provide you your user data to all your components!
The Pattern:
1. Store token:
when your user logins to your app, you would receive a token ( in your response or in response header ), you need to store the token value in localstorage, or more better in cookie storage (there are a lot of articles about it why), one is here.
2. have a /getUserData endpoint in backend:
you need to have a /getUserData endpoint in backend to retrive your user data based on token
3. call /getUserData in app mount:
before every thing in your app, you need to call this endpoint if you find token in localstorage or cookie storage. so if you run this in your componnetDidMount or useEffect(() => { ... }, []), that would work!
4. store your user data and state in context:
after you've called the /getUserData and if you had a valid token(i mean not expired token or not interrupted and edited token) , you will get you user data and what you need to do is that you need to store this in your GlobalAuthManager and provide that in to your Global App component!
after that you have your user data available to you that you can decide to show login or sign up button in your Navbar or disable/enable comment section for example based on your user data!
Wrap up:
So the key is that you have to have a GlobalAuthManager for only one purpose, that before every thing it runs in the top level in your app and gets you your user data based on provided token from localstorage or cookie storage!
after that you can manage your app state based on that your user is logged in or not!
I'm currently trying to implement in my Angular app the connection to Strava API.
To resume quickly:
User clicks on a button to connect to Strava
It is redirected to Strava for authentication(using PKCE)
Strava redirects to my app with a code
In the ngoninit I'm checking for route params and if I have the code, I launch two promises chained: the first one to get the Access Token from Strava then the recording into a DB(Firebase).
The problem is that sometimes the data is recorded in firebase and sometimes it is not. The behavior is not systematic. Strange thing is that I go into my postNewToken everytime because the console logs it.
If I just record to firebase (without strava token request) in ngOnInit(), it is created in 100% of the cases.
If I have a button that launches the token request and record into firebase, it seems to work everytime.
I have no idea how to solve it. It seems more a question of chaining promises into ngOnInit but I have no idea even how to bypass it.
The code from my component:
ngOnInit() {
const stravaCode = this.route.snapshot.queryParamMap.get('code');
if (stravaCode !== undefined) {
this.stravaService.handleStravaAuthorizationCode(stravaCode);
}
And in the service associated:
// Handle Strava Code received
handleStravaAuthorizationCode(authorizationCode: string) {
this.getStravaToken(authorizationCode).then(res => {
this.postNewToken(res).then(res => {
this.router.navigate(['encoding']);
});
});
}
// Get Strava access token to make the requests to the API -> only done once
getStravaToken(authorizationCode: string){
if (authorizationCode !== undefined){
console.log('Authorization code: ' + authorizationCode);
const data = {
client_id: environment.strava.client_id,
client_secret: environment.strava.client_secret,
code: authorizationCode,
grant_type: 'authorization_code'
};
return this.http.post<StravaToken>(this.stravaTokenURL, data)
.pipe(catchError(this.errorService.handleHttpError)).toPromise();
}
}
postNewToken(stravaToken: StravaToken) {
if (this.authService.isLoggedIn) {
console.log('Recording strava token into Firebase');
console.log(stravaToken);
return this.afs.collection('strava_tokens')
.add(stravaToken).then(res => console.log(res), err => console.log(err));
} else {
return Promise.reject(new Error('No User Logged In!'));
}
}
Finally, I understood.
I simply was not waiting for the connection to firebase to be established. So, I could not post any new data because I was not authenticated.
I'm using the Slim Framework to develop the backend. But I can not find a way to compare the token generated by my login function:
public function login($request, $response){
$key = $this->container['key'];
$email = $request->getParsedBody()['email'];
$senha = $this->salt . $request->getParsedBody()['senha'];
$usuario = $this->em->getRepository(UsuarioEntity::class)->findOneBy(['email' => $email]);
if(empty($usuario) || !password_verify($senha, $usuario->getSenha())) {
return $response->withJson('Usuario sem permissão de acesso', 401);
}
$token = array(
"session" => password_hash($usuario->getId() . 'f*u87', PASSWORD_BCRYPT),
"id" => $usuario->getId(),
"iat" => time(),
"exp" => time() + (60 * 10)
);
$jwt = \Firebase\JWT\JWT::encode($token, $key);
return $response->withJson($jwt, 200);
}
On the front-end (React) I call a JS class that handles all requests. I get and store the token value, but I do not know how to use it to check if user is logged in or not
Requisition.js
axiosPost(funcao,dados){
//A AUTENTICAÇÃO VAI AQUI
return axios.post(config.urlBase + funcao, dados);
}
setToken(token){
this.token = token;
}
getToken(){
return this.token;
}
LoginEmpresa.js(React Component)
login(){
var reqAxios = new Requisicoes();
reqAxios.axiosPost('login',{ email: this.state.email, senha: this.state.senha }).then(res => {
if(res.data){
reqAxios.setToken(res.data);
}else{
[...]
}
})
}
Thanks
You can check if the JWT is valid by doing a request to the backend API.
public function getUser($request, $response){
$user = // GET CURRENT LOGGED IN USER BASED ON THE JWT
if(!$user) {
return $response->withJson('user is not logged in', 401);
}
return $response->withJson($user, 200);
}
On the React part, you can do a request to the API to get the currently logged in user.
If you receive a 200 response with a user -> logged in
If you receive a 401 response -> not logged in
You can use a response interceptor from Axios to check the status code:
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
if (error.status === 401) {
// DELETE YOUR TOKEN
this.removeToken();
}
return Promise.reject(error);
});
Also, I recommend you to store the token in localStorage so that the session of a user won't expire on a page refresh.
setToken(token){
localStorage.setItem('jwt_token', token);
}
getToken(){
return localStorage.getItem('jwt_token');
}
removeToken(){
localStorage.removeItem('jwt_token');
}
As your front end is a React app, on the login response, you should store the token on your app's state. You may have it on the main component of your app or in a redux store, or anywhere else.
It is also good to think about storing the JWT on the localStorage, to ensure the user keeps logged in between multiple tabs on your application.
And if you are using the JWT protocol, you should be configuring your axios instance to send the Authorization HTTP header with the token inside. I don't see it on the piece of code you've provided
I inherited a Windows 8 application that is written with XAML. So in C# when I make this call
user = await MobileServices.MobileService
.LoginAsync(MobileServiceAuthenticationProvider.MicrosoftAccount);
(This is for Azure Mobile Services)
The user object is ONLY giving me the Token and the MicrosoftAccount:..............
In order to get to authenticate people, I need to be able to see WHO is requesting access...
I looking at articles like below, but I seem to be missing something? Is this javascript in the article something I would have to write in Node.js?
Example article:
http://blogs.msdn.com/b/carlosfigueira/archive/2013/12/12/expanded-login-scopes-in-azure-mobile-services.aspx
Currently to be able to get more information about the logged in user, you need to make a second call to the service to retrieve the user info. You don't really need to ask for additional login scopes (the topic of the post you mentioned) to retrieve the user name, since that is given by default for all the providers.
This post should have the code you need to write in the server side (node.js) to get more information about the logged in user. The TL;DR version is given below:
On the server side: add this custom API (I'll call it "userInfo"; set the permission of GET to "user", and all others to admin):
exports.get = function(request, response) {
var user = request.user;
user.getIdentities({
success: function(identities) {
var accessToken = identities.microsoft.accessToken;
var url = 'https://apis.live.net/v5.0/me/?method=GET&access_token=' + accessToken;
var requestCallback = function (err, resp, body) {
if (err || resp.statusCode !== 200) {
console.error('Error sending data to the provider: ', err);
response.send(statusCodes.INTERNAL_SERVER_ERROR, body);
} else {
try {
var userData = JSON.parse(body);
response.send(200, userData);
} catch (ex) {
console.error('Error parsing response from the provider API: ', ex);
response.send(statusCodes.INTERNAL_SERVER_ERROR, ex);
}
}
}
var req = require('request');
var reqOptions = {
uri: url,
headers: { Accept: "application/json" }
};
req(reqOptions, requestCallback);
}
});
}
On the client side, after a successful login, call that API:
user = await MobileServices.MobileService
.LoginAsync(MobileServiceAuthenticationProvider.MicrosoftAccount);
var userInfo = await MobileServices.MobileService.InvokeApiAsync(
"userInfo", HttpMethod.Get, null);
userInfo will contain a JObject with the user information. There is an open feature request to make this better at http://feedback.azure.com/forums/216254-mobile-services/suggestions/5211616-ability-to-intercept-the-login-response.