I am just starting to use this and I can get authorization on my site, however, there is no registration portion, I just log in using the /login mentioned in the tutorial. Also, I do not see any tutorials or content on how to implement a payment system? I see integration with Paypal for authorization but how do I get users to pay for the pages that are protected? Currently anyone can go to my app and use it, they just have to know their google info. I need them to register → pay then they can be authorized to view the app, where is the how-to on this?
The app uses node/Vue fwiw.
Hello @illcrx,
It sounds like you are using social login providers. If that is the case, there is no registration in the usual sense. By using social login, you are essentially saying that any user from that social login provider can log in to your application. That said, you can influence the registration process through the use of rules and hooks, including denying access to people who don’t meet your criteria.
Payments will be implemented mostly within your own application, leveraging Paypal’s APIs, but what you could/would do in Auth0 is include a property that indicates if a user has a paid account or not. For example, you might have a rule or hook that adds a account_paid or service_level attribute to the user’s app_metadata:
"app_metadata": {
"service_level": "unpaid"
}
Your app would read the service_level attribute and deal with the user appropriately, sending them to your payments page. Once paid, you would update the user’s profile:
"app_metadata": {
"service_level": "basic"
}
or
"app_metadata": {
"service_level": "premium"
}
I hope this helps!
Thanks @markd that does indeed clear a few things up. I find it odd though that they don’t have a checkbox for “Have a user register” “Have a user pay for entry” or things like that. I really don’t want every Tom Dick and Harry having access to the app just because they have a Google Account.
Do you know of any good docs on how to accomplish this task? If I were to hook in Paypal or Stripe I’m sure I would have to run that through my backend, then update the user service-level and tell Auth0 that as well.
The Quickstarts (Vue, Node) are probably a bit basic for your purposes, but possibly still worth checking out, and have a look at the architecture scenarios.
Be sure to read the docs on rules and hooks (linked above). They are almost always a critical part of an Auth0 solution and provide features like access control and user profile enrichment. Be sure to check out the sample rules to get an idea of what you can do with them.
You’ll want to begin by controlling access to your app, so you’ll want a rule that does that for you. You should create an attribute in the app_metadata of a properly registered (paying) user, and then use that attribute in a rule to allow or deny access. Or look at the Authorization Extension.
Let us know if you’ll need any further assistance down the road!
Do you have any examples with Vue AND Node? Or just them individually and will they work with each other as the tutorial shows them? I’m about to hire someone to do this, it’s just too much for me. There are too many gaps.
1 Like
Unfortunately we don’t have a doc / quickstart combining both Vue and Node. Your usecase consist of a few building blocks that you can build and connect using those docs mentioned by me and Mark above.
Sorry for the inconvenience but we don’t have a complex one that will cover all the aspects of yours from top to bottom.
Well put that in the suggestion box. I would think that front end and backend should probably be in sync. Or is that a far out use case…
We do have that in mind actually 
You also need to take into account that various usecases require various approaches. With our docs, tech stack, quickstarts etc. we give you a set of building blocks with which you can achieve what you want following multiple paths.
However thank you a lot for the feedback! I’ll make sure to relay it to appropriate team!
@markd How would you suggest to redirect the user for the payment page right after the signup? I would like to make my auth and payment flow to be seamless. So, let say the user signs ups for a paid plan. First with the universal login make the authentication, then should I redirect my user by a rule to a payment page? Or where would be the best place to “chain-in” the Stripe checkout process?
Ps.: I saw the Auth0 documentation about the redirect by rules but at a first sight seems to be tedious to store the state and after the redirect send the user to the /continue end point otherwise the context will be lost, etc. (I am fairly new to Auth0)
I have exactly the same question. Can anyone offer any guidance please?
1 Like
Hey, Randy! I came across your message as I am doing research on content to showcase use cases around Auth0 + payment platforms.
In case you are still in need for this content, @holly recently wrote this fresh blog post on Vue + Node: Making API Calls with Vue and Express - Building and Connecting the API
@kevinrutherford, @illcrx, @b.kisfali, Howdy, y’all! I came across this post as I am doing research on content to showcase Auth0 + payment platforms.
I opened this topic for feedback on what type of content would be useful along with a proposed one by one of our community members. Feel free to join the conversation, please 
I’d love your insight and feedback to create some useful guidance on this topic.
Thank you in advance!
1 Like
I’d be interesting in seeing a working example of Vue + Stripe Subscription.
4 Likes
Hey there @danryland!
Can you provide more context around your usecase? This way we can have more justification towards creating such example
Sure. This is my current MVP approach:
- Directory/list of event speakers with contact details
- User pays a yearly subscription for access to the directory
- Website has a ‘unlock now’ call to action that sends them to a Stripe checkout page
- On success Stripe checkout page redirects user to a /success page where they can ‘Sign in’ for an account
- No specially updating of any app meta data attached to user
Ideally I’d like an example on the following:
- User to ‘Sign up’, assign some app metadata that they’ve not paid yet, and automatically be redirected to a /payments page with stripe inputs.
- Ability to detect the difference between isAuth and isAuth with correct app metadata eg ‘Paid’
- User then makes payment and on success gets their app metadata updated to ‘Paid’
- User can now access all parts of site as they’re logged in AND set as ‘paid’
Hope that all kind of makes sense!
1 Like
Perfect! Thanks for sharing that!