I'm new in front-end development and learning Vue 3. I'm currently working on a user Login and Registration pages and I have a problem that I don't know how to solve properly.
The application has a Login page (with Email and Password fields) and a Registration page (with Email, Name, Password and Repeat password fields). Everywhere APIs are connected that check user data when clicking on the Submit button.
Now I have the following task: if the user enters an Email address that has already been registered before, then a pop-up window appears, which says: "Email is already in use. Sing Up to continue."
If the user clicks on Sing Up, then he should be routed to the Login page, in which the data that he just entered on the registration page will be automatically entered into the Email and Password fields.
For routing, I use Vue Router. I have read in the documentation that it is possible to pass props between components, however I am not sure if this is the safest and most correct method.
PS I can't use global state managers like Pinia or Vuex (the team I work for told me to not using them).
Thanks for your help and attention!
I tried using props method but I got problems during compilation
What kinda problem are you facing ? you need to insert the part of code at least or screenshot your problem.
If you want to pass data, you just add props in your route file, example :
{
path: "/example",
name: "example",
props: true,
}
And for sending a data, you need to pass data to params.
Example for option API:
this.$router.push('example', {
params: {email:email, pass:pass};
})
Example for composition API:
router.push({
name: 'example',
params: {email:email, pass:pass},
})
Dont forget to import router. Now you just add props variable:
props: ['email', 'pass']
//or composition API
const props = defineProps({
email: String, pass:String
})
const { email, pass } = toRefs(props)
Related
I have been trying to use Firebase custom claims and successfully able to create user-based roles like, manager, editor, admin. This is how my custom claim is saved in my Firebase Emulator Suite.
For user custom clams are set like this {"role": "manager"}, but whenever I tried to login and get the custom claim of the user it doesn't work.
Just an FYI I tried to set custom claims like this too {"manager": true} but hasCustomClaim("manager") always works if I use this in if and else condition even if I set {"manager": false} also if i try to login using admin privileges but still manager level works properly
const adminOnly = () => hasCustomClaim("admin");
const editorOnly = () => hasCustomClaim("editor");
const managerOnly = () => hasCustomClaim("manager" );
const editorOnly2d = pipe(customClaims, map(claims => claims.role == "editor"));
const mngOnly2 = pipe(customClaims, map(claims => claims.role == "manager"));
How shall I get current logged in user custom claims so that I can set routes based on user role?
This is what I get after login authUser.getIdTokenResult(true)
aud: "testing"
auth_time: 1629796111
email: "test12#gmail.com"
email_verified:false
exp: 1629799711
firebase: {identities: {…}, sign_in_provider: "password"}
iat: 1629796111
iss: "https://securetoken.google.com/testing"
role: "manager"
name: "Testing"
sub: "ZUlXd59HMhFI5gyozxW1xw0IXtPi"
user_id: "ZUlXd59HMhFI5gyozxW1xw0IXtPi"
I tried to search the issue, but all of them suggest the same thing that I used above.
The {"role": "manager"} will not work, because hasCustomClaim("admin") (as far as I can see) only checks for the existence of a claim named admin.
That also explains why it works when you use "manager": false, hasCustomClaim merely checks for the presence of the claim regardless of its value. Non-admins should not have an admin claim.
So if you want to use the existing AngularFire pipes, you'll need claims that identify whether the user is an admin, editor, and/or manager.
If you want to use your own role-based access control, that is possible too, but you'll have to implement your own auth pipe filters. For those, you'll want to start by logging the claims, so you can see what you're map call is working against.
I want to build an application where the users could login with Github (as of now, and probably Facebook, Google+ in the future).
I'm wondering how could I have initial properties when the user logs in first time, which would be modified in the future?
In my App component I have an onAuthStateChanged function which will push the users info into the database, but the issue is (obviously) that it will do this every time:
firebaseAuth.onAuthStateChanged((user) => {
if (user) {
this.setState({
user
});
usersRef.push({
id: user.uid,
displayName: user.displayName,
coins: 3000
});
} else {
this.setState({
user: undefined
});
}
});
Is there a way I could check if the user logged in before? Is there a better way to achieve what I want?
Perhaps you can use a Firebase Authentication Trigger as documented at https://firebase.google.com/docs/functions/auth-events.
You could set up a trigger that runs once on the Firebase servers just after a user is created; that trigger can update data in the database for the user, which could include defaulting certain values. Your React app would then be able to read that data when it needs it.
I have been taking a Node.js course on Udemy and would like to apply some of the knowledge I have gained to create a simple web application. I would like to have a user register, which leads him to an admin panel, this part I already have.
This user (requester) can then refer users (invitees) to this website using a unique link. For example he would click a button to generate a unique hyperlink (my idea for this link was to be the http://websiteurl/userid of the requester who is sending the link).
The requester can then send this link through email to their friends to invite them to the website, once they click the link they are taken to a sign up form and when they fill in the form they are linked (added to an array under the original user).
How would I go about setting up this "session", as in make sure that the form that the invitees fill out is linked to the original requester? How can those forms be generated dynamically on the requester's hyperlink?
I'm not looking for the exact code to do this, but rather validation if my idea for the url is a good approach or if there are other approaches I should consider.
Thanks in advance!
Well, this would require you changing the schema for your database. A user will need to have a property like:
{
referred: []
}
The referred array should contain ids or some sort of reference to a user's referred users.
On the "/:userid" route, the form should submit to the route where a new user is created and have a parameter with the user ID. In this case, I am using query parameters.
So if a person were to visit /foo, they would get a form that would post to a URL like /new?userid=foo.
In that route, you can do something like this (assuming Express):
app.post("/new", (req, res) => {
const userID = req.query.userid;
const newUser = // create user normally
if(userID) {
// `userID` referred this user
const referrer = getUser(userID);
referrer.referred.push(newUser);
save(referrer);
}
});
The getUser function should returning the current user, and you should modify the referred property with the new user. This code was merely an outline and you should update the user in your database.
In a nutshell, a form should post to /new?userid=foo, and when creating a new user, if this parameter is present, you can update the database entry for the user id in the parameter with the id of the new user.
I am using React-GA, and it works as expected, but I have a requirement to put user email in event tracking:
I see this in the example:
ReactGA.event({
category: 'Editing',
action: 'Deleted Component',
label: 'Game Widget'
});
I have a email of each user as a string. Where do I better put it in the request?
yes i am with #davids answer but i want to give more proper answer.
first you need to import react-ga module
import ReactGA from 'react-ga';
and than whenever you initialize google analytics you can set userId there
ReactGA.initialize('UA-000000-01', {
gaOptions: {
userId: xxx-xxx-xxx-xxx
}
});
Or if you want to set userId after user logs into your system, than you can do the following way
1. initialize google analytics without userId
ReactGA.initialize('UA-000000-01');
2. and just after login you can set userId
ReactGA.set({ userId: 123 });
ref: https://github.com/react-ga/react-ga#reactgasetfieldsobject
You should not use an email address as that is personally identifiable information and as such to track it in GA is against Google's terms and conditions.
User ID ("userId") should be setup in the "initialize" or "set" GA command, not in an event. User ID is scoped to the user, so it shouldn't ever change for a user. Also, you'll have convert email to an anonymous (non-PII) id before it's used as userId
ReactGA.initialize('UA-000000-01', {
debug: true,
titleCase: false,
gaOptions: {
userId: 123
}
});
User ID doc: https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#userId
I'm using Meteor/react and flowRouter and I would like to create an app with two kinds of users; let's say the stay simple:
Client
Provider
In fact Client has some "UserAccounts" fields (name, password, email ...) but I would like to add many of others: Idk like Passport Number, Social Security Number, Bank Account etc ...
The Provider could fill this fields if he wants too (so could have the same "role") but its main goal is to have other fields like idk: Job title, Category Job, Other Password etc ..
So Is some of you used the package UserAccounts to do this or you created a system by yourself ?
Of course I wish using email validation etc ... The application Ui would like to have a search component searching for Providers and only in Providers.
Also, I will use two Registration form (same page but two forms) but one Login modal for both types.
My question is, is it a good thing to use userAccount, and probably I will need roles for the two roles, but do UserAccount accept many others custom fields, do I have to set in in 'Profile' and won't it slow too much the application with only one user collection ?
Thanks guys for the mind blowing help :)
Yes, you can use userAccount for your case & No, it won't slow down to any noticeable amount.
To manage different roles you can use alaning:roles package. It helps you limit access to certain parts of code to roles and groups.
UPDATE: (Edit)
As Pointed out in comments, it is not advisable to use profile as it is automatically publishes. Instead try this:
Regarding, second part of adding more fields in user account, you can add any number of fields in the profile section. The document will look something like this:
{
_id: "bbca5d6a-2156-41c4-89da-0329e8c99a4f", // Meteor.userId()
username: "cool_kid_13", // unique name
emails: [
// each email address can only belong to one user.
{ address: "cool#example.com", verified: true },
{ address: "another#different.com", verified: false }
],
createdAt: Wed Aug 21 2013 15:16:52 GMT-0700 (PDT),
profile: {
//profile data
},
passportNo:'PASSPORT',
ssn:'SSSN',
oneMoreField: 'OneMoreField',
}
By default, here only email, username and profile will be published and your other data will not be visible to client unless published and subscribed.
You can read more about accounts here