Streaming live at 10am (PST)

Authpro + Webflow to create a Membership portal/protected pages


#1

Hi there,

First off, this post is not by any means connected to Webflow. If the features I present do not work as expected, or are buggy, then that is a reflection on me and not Webflow :blush:

I would like to introduce an awesome Frankenstein of functionality that we as Webflow creators have been looking to accomplish for some time!

We have been wanting to create a membership portal within Webflow, but with an ease that isn’t too technical.

I would like to introduce Authflow which is a walkthrough that shows how to combine the membership portal functionality of Authpro, with the ease of creating websites in Webflow.

You can learn more at http://authflow.webflow.io/

The following is a walk-through of how to create this feature within your own projects:

  1. Purchase Authpro Deluxe plan: https://www.authpro.com/signup.shtml

  2. Configure your Authpro account using the account wizard (take note of your Authpro ID)

  3. Clone the Authflow Template: https://webflow.com/website/Authflow?s=authflow-template

  4. Copy/paste Authflow Template pages to your Webflow project where you would like to add a membership portal (currently, there are 11 required pages):

  1. Locate your Authpro ID within your Authpro account (same as what was noted previously):

  1. Access the submit button on the Login, Registration, and Lost Password pages to change the ID to your personal Authpro ID

  1. Access the custom code for the Profile, Edit Profile, Cancellation, Lost Password, Protected pages to change the ID to your personal Authpro ID

  1. Access the Code Editor of the Custom Code Embed elements on the Edit Profile and Cancellation pages:

  1. Update the hidden input field value to your personal Authpro ID:

  1. Update Logout link on the Profile page to point to your personal Authpro ID:

  1. Then, update the URLs within your Authpro Settings to point to the correct pages within your Webflow project:

  1. Lastly, update the redirect URLs within your Authpro Design, and select the redirect options:

Also, if there is a feature that you would like to see added to the template (i.e. modal pop-ups), feel free to leave the request at https://authflow.nolt.io/

Hopefully, this was helpful. :nerd_face:


User login and registration functionality update?
Keyfold - User registration and login for Webflow
#2

Thank you @mistercreate! Can’t wait to dig into this. Might need to add it to my weekend plans for fun. :stuck_out_tongue_winking_eye:


#3

Bookmarking for later! Thanks :slight_smile:


#4

Awesome @mistercreate!

How about CMS content like blogs? Can they be protected with this method?


#5

Great question!

Yes, CMS content can be protected as well.

Anywhere the Authpro script is added will be protected.


#6

So could you use a conditionally visible script to protect individual blog pages or would it always protect all blog pages?

If so this could also be useful to hide products in a product collection that are member only.


#7

Definitely a great feature.

We could add a Rich Text Element to the CMS Collection, and include the script where needed. This would protect certain products.

This solution isn’t a conditionally visible solution, but you bring up a great idea.

Could you add it to the feature request list?: https://authflow.nolt.io/

I imagine we can figure something out :nerd_face:


#8

Done.

In the same vein, could this be harnessed to protect/hide elements within the html structure of a page as well?


#9

Thanks!

Oh, I love it. Definitely a great idea.

I think it would be possible with a script that would confirm login, and show/hide based on confirmation of login.

I saw the following jQuery code, but I’ll also add it as a feature request:
https://www.w3schools.com/jquery/jquery_hide_show.asp


#10

Having Trouble Implementing clone. Whenever Applicant Presses Submit In Webflow Form They Are Getting Sent To The AuthPro Page Asking Them To Resubmit The Information They Just Filled In The Webflow Form Essentially Filing Out The Same Inputs Twice. Is There Anything I Overlooked While Following Your Instructions?


#11

Great question!

Would you be able to share your Authpro Settings?

Within the Authpro Settings you can update your New Member defaults to point the URL of your choice:


#12


#13

Great question, definitely!

There is an additional step that I would need to enter into the documetation:

You will find within the Authpro “Design” tab a Registration page section where you can update the redirect URL.

The following short screen-capture shows the possible solution: https://cl.ly/092y0117022U

Hopefully this is helpful :nerd_face:


#14

Definitely Feels Like I’m A Step Closer! I Inputed The New URL’s But Unfortunately The Checkboxed Featured You Mentioned In The Screencast Is Not Available For Me. I Am Currently Using The Free Account To Test Product First, Could This Be Paid Feature Only?


#15

Ah, yes - it would be a Deluxe Authpro feature.


#16

problem solved! thanks, hopefully my questions will help others!


#17

Definitely! Thanks for asking.

I’ll also update the documentation before the end of today.


#18

Hey @mistercreate,

You mentioned in the wesite that this solution would work with any Payment system that redirects to an url on successful purchase, what about login?

I’m asking this because, remember I’ve used Plasso system for the payment and user registration but I don’t know how to integrate this solution to make more secure, can you advise?


#19

Hi @aaronocampo,

Great question!

I have yet to integrate a payment system, but I plan to do so in the coming days to better understand the integration.

From what I have found, Authpro supports a number of payment systems like PayPal and Stripe: https://www.authpro.com/paid-registration.shtml

And you can view how to integrate your Stripe account with your Authpro account at https://www.authpro.com/paid-registration-stripe.shtml

Hopefully this is helpful :nerd_face:


#20

Hi @matthewpmunger,

I was able to complete your feature request to protect individual CMS pages, and documentation can be viewed at http://authflow.webflow.io/documentation/webflow-collection-pages

The following URLs are examples:
Unprotected project - http://authflow.webflow.io/project/labore-ad-aut
Protected project - http://authflow.webflow.io/project/id-cumque

Feel free to add any additional feature requests, and I’ll be happy to take a look at them: https://authflow.nolt.io/