Integrate WIX member registration/login process with custom app

Ask the community
, , , ,
1

Hi everyone,

I’m planning to develop an app which offers paid, premium features. I’ll code that app myself and not use the WIX App builder. I’m advertising this app with a website built with WIX Editor. I want to use the pricing plan feature to sell the premium plans for my app.

To buy a pricing plan on WIX, a user needs to register/sign-in on my website. In my app it’s basically the same. They have to register/sign-in in order to use the app. To have the best user experience, I’d like that my users can use the same login in both cases. Is there a good and easy way to achive this?

If my app was completely standalone, I’d use keycloak or maybe a paid service like Auth0 for authentication, authorization and user management. Is there a good way to replace the WIX register/sign-in process with my own, custom one?
Or can I maybe even do it the other way around and use WIX as an identity provider for my app as well? Users could use the WIX register/sign-in forms to authenticate in my app. That would save me some work and maybe even money because I don’t need to use a paid service like Auth0.

Any feedback appreciated! In case there are guides/walkthroughs for the individual solutions, it would be even better! :slight_smile:

Thanks in advance!
Regards, Jonas

2

Hey, it’s Anush fro the App Market product team. I don’t have the answer to your question but would love to know why you don’t want to develop your app as an app to the market. If you are willing to talk about it, please send me an email to anushg@wix.com. I would really like to learn from your concerns as well as offer some ideas for benefits why it could be good to build your app for the market.

3

Hi Anush, to be honest, I didn’t really look at the WIX app builder yet. I’m an experienced app developer, and I’m most productive when using the tools I’m already familiar with. That’s the main reason, and I’m afraid all the cool features the WIX app builder probably has won’t change that. :slight_smile:

4

Which tools are you familiar with ?

5

Ionic/Angular for app development (progressive web app, Android, iOS) and .NET core for backend development.

1 Like
6

Not really sure if i understood the issue here the right way, but maybe one of the following links may help you somekind…

  1. Wix OAuth integration in mobile apps
  2. New Tutorial: Using OAuth for Single Sign On
  3. Is OAuth supported for external websites?
  4. WIX member Login via oAuth
  5. Google Identity Platform: OAuth 2
  6. OAUTH using SSO w Velo for Google Sign In
  7. Oauth2 in Wix Corvid
  8. Refresh Token oauth2 - #6 by mvveiga
1 Like
7

Thanks for all the useful links!
Now I feel like I’m too stupid to use the search correctly. :sweat_smile:

The first one seems to be the most promising one to me, as it looks like I could use WIX as an identity provider for my app with WIX headless. I’ll give it a go in the next couple of days and see if I can get it working.
A problem with that for me is, that WIX seems to offer only Google and Facebook as social logins. As I want to publish my app to the iOS AppStore as well, I need to offer Apple login as well to get my app submitted. And if I have to implement and add that to WIX myself, it will be quite complex as I’m not familiar with Velo at all.

None of the links seem to indicate the other way: Replacing the WIX login with an external login (e.g. Keycloak or any other identity provider). Any thoughts on this? Is this possible at all? Are there any guides how to do this?

8

Does this post has any connection to yours?

Now I feel like I’m too stupid to use the search correctly.
All i typed in into the search was → ‘Oauth’ → you will find more posts about it.

In the past (long ago) i was able to generate my own Oauth-authentication using an HTML-COMPONENT to be able to login with google.

Seems like this person have had the same issue like you …

But as i see it, it should be possible to achieve your aim. So in general about Oauth…
To achieve single sign-on (SSO) between your external website and a Wix site using OAuth, you need to follow a few steps. OAuth is a standard protocol for authorization and is commonly used for authentication in scenarios like these. Here’s a general outline of the process:

1. Set up OAuth on your External Website:

a. Register Your Application:

  1. Go to the developer portal or account settings of your external website and create a new application to get client credentials (client ID and client secret). This step might vary depending on the platform you’re using.

b. Implement OAuth:

  1. Implement OAuth 2.0 on your external website. You can use libraries or SDKs in your preferred programming language. Common libraries include OAuthlib for Python, Spring Security for Java, or Passport for Node.js.
  2. When a user logs in on your external website, redirect them to the Wix OAuth authorization endpoint. You will need to include your client ID, redirect URI, and other required parameters in the request.
  3. The user will be prompted to log in to Wix (if not already logged in) and grant permission for your external website to access their Wix account.
  4. Wix will redirect the user back to your external website’s redirect URI with an authorization code.
  5. Exchange the authorization code for an access token and refresh token by making a request to the Wix token endpoint. Store the tokens securely.

2. Set up OAuth on the Wix Site:

a. Add OAuth Provider on Wix:

  1. In the Wix site settings or editor, find the authentication or user management section. Wix supports custom OAuth providers.
  2. Add a new custom OAuth provider and provide the client ID and client secret obtained when you registered your external website as an OAuth application.

3. Implement Login Flow:

  1. On your Wix site, create a login button or form that triggers the OAuth flow. This might involve redirecting the user to your external website’s login page.
  2. When the user clicks the login button on the Wix site, initiate the OAuth flow. Redirect the user to the external website’s authorization endpoint.
  3. After the user grants permission, your external website will redirect the user back to the Wix site with the necessary tokens.
  4. On the Wix site, use the received tokens to authenticate the user and create a session.

Now, when a user logs in on your external website, they can seamlessly access your Wix site without needing to log in again, thanks to the SSO mechanism implemented with OAuth. Ensure that you handle token refresh and expiration to maintain a continuous session. Keep in mind that specific implementation details may vary based on your technology stack and the capabilities provided by your external website and Wix.

But what exactly is your aim ?

There are two different usecases, right?

  1. You login on your external APP or website → automatic login on wix-site.
  2. You login on wix-site → automatic login on external app or website.

What Oauth is capable to do? Some example generated response from AI.
OAuth (Open Authorization) is an open standard and protocol for authorization that allows third-party applications to access resources on a user’s behalf without exposing their credentials. OAuth is widely used for authentication and authorization in various scenarios, providing a secure and standardized way for users to grant access to their data. Here are some key capabilities and use cases of OAuth:

  1. Authorization:
  • Delegated Access: OAuth allows users to grant third-party applications limited access to their resources (e.g., user data) without sharing their credentials.
  • Fine-Grained Permissions: The resource owner (user) can grant specific permissions to an application, restricting the scope of access.
  1. Authentication:
  • OAuth can be used for user authentication through the Authorization Code Grant flow. This is commonly used in scenarios where a user logs in via a third-party service (e.g., “Login with Google” or “Login with Facebook”).
  1. Single Sign-On (SSO):
  • OAuth can facilitate Single Sign-On, allowing users to log in once and access multiple services without needing to log in again.
  1. Token-based Security:
  • OAuth issues access tokens and refresh tokens, providing a secure and temporary means of accessing resources. Access tokens are used for resource requests, and refresh tokens can be used to obtain new access tokens without requiring user reauthentication.
  1. Scalability:
  • OAuth is scalable and suitable for distributed systems. It allows different components to interact securely and independently.
  1. Use in APIs:
  • OAuth is commonly used in API authorization. API providers use OAuth to control access to their resources, ensuring that only authorized applications can interact with their APIs on behalf of users.
  1. Cross-Domain Authorization:
  • OAuth enables authorization across different domains, allowing users to grant access to their resources hosted on one domain to applications running on another domain.
  1. Mobile and Web Application Integration:
  • OAuth is widely used in mobile and web applications, enabling seamless integration with third-party services and APIs without exposing user credentials.
  1. Social Media Integration:
  • OAuth is often used by social media platforms (e.g., Facebook, Twitter) to allow third-party applications to access user data.
  1. Security and Standards:
  • OAuth is designed with security in mind, and it has become a widely adopted standard. OAuth 2.0 is the current version, offering improvements in terms of simplicity and flexibility.
  1. Revocation of Access:
  • Users can revoke access granted to a third-party application at any time, enhancing user control over their data.

OAuth is versatile and adaptable, making it a popular choice for securing and authorizing interactions between different services and applications on the internet.

So if we want try to genearte an APPLE-LOGIN…
If you want to integrate Apple Login (Sign in with Apple) along with OAuth for your app, you’ll need to follow Apple’s guidelines for authentication. Here’s a general guide:

1. Register Your App with Apple:

  1. Go to the Apple Developer portal (https://developer.apple.com/) and sign in with your Apple ID.
  2. Create a new App ID for your app.
  3. Configure a Services ID for Sign in with Apple.

2. Add Sign in with Apple to Your External Website:

  1. Implement Sign in with Apple on your external website using Apple’s Authentication Services. You’ll need to use Apple’s JavaScript API for web-based authentication.
  2. Include the necessary JavaScript library in your web pages and follow Apple’s documentation for handling the authentication flow.

3. Handle Authentication on Your External Website:

  1. When a user chooses to sign in with Apple on your external website, initiate the Sign in with Apple flow using the JavaScript API.
  2. Apple will authenticate the user and provide you with an identity token.

4. Integrate Apple Login with OAuth on Wix:

  1. On your Wix site, follow the steps to integrate Apple Login into your authentication system. Wix might have specific settings or configurations for adding Apple Login.
  2. Use the identity token received from Apple to identify and authenticate the user on your Wix site.

5. Submitting Your App:

  1. When submitting your app to the respective app stores (Apple App Store, Google Play, etc.), make sure to include details about the authentication methods you’re using, including Sign in with Apple and any OAuth providers.
  2. Ensure that your app complies with the guidelines and policies of the app stores.

Note:

  • Each platform may have specific requirements and guidelines for integrating authentication services, so be sure to check the documentation for both Apple and Wix.
  • Keep your users’ privacy and security in mind. Follow best practices for handling user data and authentication tokens securely.
  • Stay up-to-date with the latest guidelines and recommendations from Apple and Wix, as they may release updates that could affect your implementation.

Remember to test thoroughly before submitting your app to ensure a smooth user experience and compliance with all relevant guidelines.

You as coder, should consider to use more the AI in difficult situations. It can help you a lot, because even if it won’t give you the exact answer it still can give you the right hint and shade some light into the dark.

9

Thanks a lot for that very detailed reply!

Does this post has any connection to yours?

In general it has, I’m going to give WIX headless a try to use WIX as identity provider. But the solution provided is not what I’m looking for. There is a description of the WIX member registration and login API. This is not what I want to implement.
In general my approach is to use existing building blocks for things which are “standard” and/or not of my expertise. Authentication, authorization and SSO are a perfect example of that. It’s complicated, it’s dangerous if you do it wrongly, but it’s already there in millions of applications. So I don’t want to reinvent the wheel…
Therefore I don’t want to use WIX only as the backend for that part and develop the frontend myself. I want to either use the “full package” for that from WIX and just integrate it into my app, or I’d like to use another existing component and integrate that into WIX. The first option sees to miss some features, the second one is maybe not possible…

Seems like this person have had the same issue like you …

Exactly. But no replies on that post…

But as i see it, it should be possible to achieve your aim. So in general about Oauth…
To achieve single sign-on (SSO) between your external website and a Wix site using OAuth, you need to follow a few steps. OAuth is a standard protocol for authorization and is commonly used for authentication in scenarios like these. Here’s a general outline of the process:

1. Set up OAuth on your External Website:

a. Register Your Application:

…

Haha, I read 2 lines of that and I already knew this was AI generated. :slight_smile: Don’t get me wrong, I heavily use ChatGPT in my daily (coding) life. But I’m afraid this is not the right occasion to use it (even though it’s worth a try of course). This use case is too specific, there is not enough info around in the web to solve it (that’s why I asked here) and it involves special know-how of the WIX product which can’t be “made up” by the “intelligence” of the AI.
The problem is the following part:

a. Add OAuth Provider on Wix:

  1. In the Wix site settings or editor, find the authentication or user management section. Wix supports custom OAuth providers.
  2. Add a new custom OAuth provider and provide the client ID and client secret obtained when you registered your external website as an OAuth application.

That specific part is just not possible with WIX. If it would have been, I would have just done it and didn’t need to ask the question here…

But what exactly is your aim ?

There are two different usecases, right?

  1. You login on your external APP or website → automatic login on wix-site.
  2. You login on wix-site → automatic login on external app or website.

Exactly! The classical SSO scenario. I need an identity provider which can be used by WIX and by my app. I can either use WIX as the IP (I’m going to try out WIX headless, thanks for giving me that hint!) or try to integrate an external one (like Keycloak, Auth0, …) into WIX, but it seems like that’s not too easy to achieve.
If I can go with WIX headless, I need to solve the issue with the Apple social login. Here again, the AI lacks WIX-specifix know-how, which is crucial to get it going. In general I know what needs to be done, I’ve implemented Apple, Google, Facebook and Twitter social login in other apps. But your identity provider needs to support that out of the box, which is not the case for Apple and WIX. Maybe I’m going to ask about that in the WIX headless discord channel.

Anyway, I really appreciate your detailed support posts! You already got me a lot of very helpful links. :pray:

10

That specific part is just not possible with WIX. If it would have been, I would have just done it and didn’t need to ask the question here…

You know about wix-secrets?

Leave your results here, so i can check which solution have been found, thanks.

11

Apologies for piggybacking on this thread, but I’m facing the same problem. Here’s what my current setup is:

  1. Webapp hosted on S3 and CloudFront. Only verified members have access to the webapp via a members-only page link on Wix Studio site. I’ve also setup OAuth app under Headless settings and got my Client ID.

  2. I’ve setup the page link button such that clicking on it calls an onclick function as follows:

import wixUsers from ‘wix-users’;

import wixLocation from ‘wix-location’;

export function button1_click(event) {
const userID = wixUsers.currentUser.id;
const scope = “READ_MEMBERS”;
const oauthUrl = https://www.wix.com/oauth/authorize?client_id=<client ID>&redirect_uri=<oauth-callback.html link>&response_type=code&scope=${scope}&state=${userID};

wixLocation.to(oauthUrl);

}

  1. On my webapp’s oauth-callback.html, I’m calling AWS Lambda, with a POST method request for code and state.

  2. Then on Lambda, I have this code snippet:

try {
// Exchange the authorization code for an access token
const tokenResponse = await axios.post(‘https://www.wixapis.com/oauth2/token’, {
clientId: ‘’,
grantType: ‘authorization_code’,
redirectUri: ‘<webapp’s redirect uri - basically the oauth-callback.html’,
code: authCode,
//clientSecret: process.env.CLIENT_SECRET // Use environment variable for client secret
});

    const accessToken = tokenResponse.data.access_token;

    // Replace 'userId' with actual logic to retrieve the user ID
    const userId = 'id';
    const sessionToken = uuidv4();
    
    const wixApiUrl = `https://www.wixapis.com/social-groups/v2/members/${userId}/memberships/query`;
    const wixResponse = await axios.get(wixApiUrl, { 
        headers: { 'Authorization': `Bearer ${accessToken}` }
    });

    const isPaidMember = wixResponse.data.isPaidMember;
    const memberStatus = isPaidMember ? 'full' : 'trial';

    const params = {
        TableName: "<webapp tablename>",
        Item: { userId, sessionToken, memberStatus }
    };

Basically, the Lambda code includes save and load state table for DynamoDB, tied to the member’s userID.

  1. Basically, all i want is when users on my Wix site clicks on the page url link, they’ll pass their userID (unique identifier) to the webapp on AWS Lambda, so that when the user saves or loads the webapp state (eg. a game’s save or load state), it’ll then tie that save or load state on DynamoDB to the user’s ID on Wix.

The issue now is that i’m getting the scope all wrong with the following Chrome console log error:

Refused to execute script from ‘https://www.wix.com/_api/wix-laboratory-server/laboratory/conductAllInScope?scope=error-pages&accept=jsonp&callback=setExperimentsSync’ because its MIME type (‘application/jsonp’) is not executable, and strict MIME type checking is enabled.
authorize:1

Failed to load resource: the server responded with a status of 400 ()

Can someone who’s experienced with OAuth 2.0, Wix Studio, 3rd-Party APIs help me? Been tearing my hair out on this for the past three nights.

12

All, I have a similar problem. I am creating an asp.net core project and wish to perform single sign on of my users against Wix. Effectively doing authentication and authorization using Wix as my provider. I believe I need to use Oath2 for this.

Can someone please provide some help specifically with asp.net as a client to this?