CB ajax login

I was wondering whether it would be possible to request the url by ajax ?

Yes, again use the auto action URL for whatever you want. You can completely customize its output as well. So it can give a JSON response to act on in your ajax call.

Also as you are updating CB Connect, could we imagine linking to it so that the users could log in with their social networks data ?

Nothing to update in that regard you can already link to the buttons directly. URL structure as follows.

index.php?option=com_comprofiler&view=pluginclass&plugin=cbconnect&provider=PROVIDER

For example the below will trigger Facebook login behavior.

index.php?option=com_comprofiler&view=pluginclass&plugin=cbconnect&provider=facebook

No this is not an ajax endpoint and there are no plans to add one and requires being redirected to the various social providers to authorize permission.

Of course the best thing would be to have an ajax login/logout and an ajax registration form that I could use in the web component

We're going to get rid of our login/logout endpoints entirely. We plan to just let Joomla handle login/logout in CB 3.x. Registration will be doable via an API endpoint in CB 3.x as we plan to have official API endpoints. I have absolutely no timeframe for any of this though so for now you need to do this using CB Auto Actions.

BTW using the above autoaction, how do I get the user from the url with [post_username] and [post_password] ? Is it enough to input these in the action tab and leave the user on automatic ? or should I code the user with these and how ?

There won't be a user object available until they login. Currently you're not going to be able to use the Login / Logout auto action for your ajax endpoint as it has a redirect and doesn't set the logged in user into substitution data so you won't have a way to output anything from that logged in user yet. I'll be improving that sometime today so the redirect is optional and will set the logged in user into substitution data.

Thanks !

I have set up two autoactions 

1) One for log in : I send the user/pass and the autoaction sends back a json with {
"success": true,
  "isloggedin": 1,
  "userid": [user_id],
  "token": "[cb_token_api]"
}

I have tested with a userid and it works fine, then I store the token in the local storage of my component (as cookies are mostly unusable on external domains)

The point for this autoaction is then to get the proper userid from a code or something using the post_username and post_password. That was mostly my question ?

This first autoaction sends back twice the json for now, so I guess that after your modification that will be only one.

2) My second autoaction gets back the token and logs in the user based on that. Then it sends back the json {
"valid": true
}
This allows me to check with the outside local storage that the token is valid and force logs in the user

Again this works fine except that I get back twice the values for now.

3) As for registration, I need to do basically the same thing and get back a json token to authentify my new user in the outside local storage.
With an autoaction this seems fine (maybe check that there is no redirect also ?) but I'd like to know how I could integrate all the checks that exists in CB Registration (ajax for username, password strengths, CB subs etc etc )

So is there a solution for simply changing the post url of the registration to this new autoaction ? or something similar ? or can I call CB plugins directly in my registration form ? knowing that it's not very simple to use DOM manipulation within a web component ?

What are your idea on point 1 userid from code and point 3 ?

BTW : once we'll be at CB 3.0 we'll update all and also move to tailwind for css

Latest build release of CB Auto Actions now makes the redirect optional. Simply set it to "none" and it won't redirect anymore. Additionally the logged in user is now set in the action data. So to get the user id of the logged in user use [data1_user_id] for example. Example API endpoint usage as follows.

Global
Triggers: None
Type: Login / Logout
User: Automatic
Access: Everybody
Action
Mode: Login
Method: Username
Username: [post_username]
Password: [post_password]
Force Login: Yes
Redirect: none
Output
Display: JSON
Layout: Method: PHP
Substitutions: Yes

In this case data1 is just the logged in users CB user object. So you've access to it like you would any CB user object (e.g. [data1_username], [data1_user_id], etc..).

3) As for registration, I need to do basically the same thing and get back a json token to authentify my new user in the outside local storage.
With an autoaction this seems fine (maybe check that there is no redirect also ?) but I'd like to know how I could integrate all the checks that exists in CB Registration (ajax for username, password strengths, CB subs etc etc )

Our registration is not designed for that. You're honestly better off just using an iframe and letting it happen on the site directly within your application. You can use iframe window messenger API to let the application know the registration is complete so you can handle dealing with the form submit process.

I don't recommend having convoluted large registration processes for an app though. Ask for their name, username, email, and password and that's it. Gather the rest of the information after they've registered would be the better approach. Large registration processes and applications just do not belong together.

So is there a solution for simply changing the post url of the registration to this new autoaction ? or something similar ? or can I call CB plugins directly in my registration form ? knowing that it's not very simple to use DOM manipulation within a web component ?

The registration auto action just directly creates the user within CB. It's not like a normal registration endpoint with validation. It will either succeed or it will fail. It won't interact with plugins like CBSubs in any way.

Excellent !! this works perfectly well

I did not think at an iframe into the web component to register but that's a very good idea. Will try this way...

Following on the iframe idea, what would be the best way according to you to send a message from the iframe to my web component.

I could imagine a trigger onAfterSaveUserRegistration which would send a code window.parent.postmessage with the token for the new user, but what could be the conditions to detect that we are in an iframe or in the web component ?

You need to use the below API.

developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

It needs to be done from JS so you'd need to output it at the end of the registration process. So yes onAfterSaveUserRegistration would likely be when you do this, but that may not be the case if CBSubs is involved. You also need to deal with the redirections missing &tmpl=component so your iframe renders only the registration form and not the entire site.