Authpro + Webflow to create a Membership portal/protected pages

Community resources Webflow Tips
1

Hi there, The below walkthrough will no longer work as an example as the subscription to Authpro has been canceled. They have been a supportive company, though an easier solution can be found in https://www.memberstack.io/

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):

image
image3360×1794 443 KB

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

image
image3360×1794 1.04 MB

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

image
image3360×1792 449 KB

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

image
image3360×1788 464 KB

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

image
image3360×1794 414 KB

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

image
image3360×1794 660 KB

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

image
image3360×1790 419 KB

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

image
image3360×1790 637 KB

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

image
image3360×1788 628 KB

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:

17 Likes
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:

1 Like
3

Bookmarking for later! Thanks :slight_smile:

1 Like
4

Awesome @mistercreate!

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

2 Likes
5

Great question!

Yes, CMS content can be protected as well.

Anywhere the Authpro script is added will be protected.

1 Like
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.

2 Likes
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?

1 Like
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:

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?

1 Like
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:
https://sea2.discourse-cdn.com/webflow1/uploads/webflow1/optimized/3X/a/c/ac70ce982709c3344ca4e03e9a13ee70cbbf43ad_1_690x367.png

12

11%20PM
11%20PM1438×1440 358 KB

1 Like
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: Screen Recording 2018-07-22...

Hopefully this is helpful :nerd_face:

14

40%20PM
40%20PM1734×1366 331 KB

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!

1 Like
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: Paid membership registration - AuthPro

And you can view how to integrate your Stripe account with your Authpro account at Paid membership website registration with Stripe - AuthPro

Hopefully this is helpful :nerd_face:

1 Like
20

Hi @matthewpmunger,

I was able to complete your feature request to protect individual CMS pages, and documentation can be viewed at Webflow Collection Pages

The following URLs are examples:
Unprotected project - Authflow
Protected project - Authflow

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