Attention Webflow Users
Microsoft requires a special folder and file to verify your domain. Unverified accounts have an ugly "unverified" banner that is displayed to members during signup and login. At this time, Webflow does not allow us or you to add this required file. Please upvote the feature here. All that said, it is possible to work around this via Cloudflare workers.
---------------------------------------------
This article will show you how to add a "Continue with Microsoft" button to your signup, login, and profile forms. Part one is a 3-minute video with step-by-step instructions to connect your Memberstack and Microsoft accounts. Part two will show you how to set up the front end.
Part 1: The Backend
Here's a link to Microsoft's Developer Site.
Part 2: The Frontend
If you are using Memberstack's pre-built sign-up, login, or profile UI, then you're already finished. Enabled social auth providers will automatically appear in the pre-built UI.
If you'd like to add a social auth button to your Webflow project this section is for you.
Signup & Login Forms
I recommend copying one of our Webflow social auth buttons. They are 100% built in Webflow, already have the attributes you need, and are easy to customize:
Clone some buttons in the Webflow showcase.
To create your own from scratch:
- Create a link block with the attribute
data-ms-auth-provider="microsoft". - Add the Microsoft logo.
- Add your button text. We recommend something like "Continue with Microsoft"
That's it for signup and login buttons. Profile buttons have a few additional elements.
Profile Forms
In this other tutorial, we'll create a UI for members to connect providers, view previously connected providers, and (optionally) disconnect providers.
Comments
7 comments
Hey Duncan, I was able to get the Microsoft login to work, but after authentication, it just redirects me to the homepage of my site. Instead, I'd like it to redirect to the pricing plan page. Any help you could provide here would be much appreciated.
Hey Stefan 👋 That's awesome!
Do you have your default redirects or plan level redirects set already? https://docs.memberstack.com/hc/en-us/articles/7384608370715
Easy! Thank you so much Duncan!
Hey @Duncan Hamra, I have another question related to the process. After users sign in through Microsoft and complete their payment via Stripe, they're directed to the Microsoft store for an Add-in download. Is it possible with Memberstack to store both the Microsoft user ID and Stripe transaction ID in a database for payment verification when logging into the downloaded Excel add-in?
This help article is no longer current with how Microsoft handles App Creation.
Have you tried using this feature in Webflow?
https://help.webflow.com/hc/en-us/articles/36293473743123-Upload-a-well-known-file#01JESABDHBZGQCZN74DQ2JTKAQ
Oooo great question! We have not tried that yet. Adding to our to-do. If you beat us to it, please let me know.
cc Chukwudi
Please sign in to leave a comment.