Need HELP with Mobile F7 app login process

[sylvainbaron]

Hi everybody,
I’m stuck since more than a week with the login routine for my Mobile App.
I’ve read every topics, done hundreds of different tests.
I’m lost and dont know how to figure it out…

At this point:

• My Web App works perfectly (Docker, Bootstrap5, NodeJS, Postgresql)
• My mobile app is made with F7+Capacitor

I can create my pages, i setted up my CORS and can load SC from my production target and use query to repeat elements.
I checked my credentials, secure, etc…

I just need to Login > create cookies with my UserID based on my security provider.
This will allow me to load other queries based on userID.

Even submitting a basic SC form seems not working anymore…
I used the F7 Login Screen on the index page, I checked the “Start with App” and a close Form action on success… Nothing happens on clicking the signing button.

<ul><li dmx-on:click="scFormLogin.submit()"><a href="#" class="item-link list-button">Sign In</a></li></ul>

I tried duplicating my Web Login SC (then I tested different modifications).
At this point I commented all the steps in SC and just added a mail (with POST values), even this doesn’t work…

Have you an idea about what i’m doing wrong, any exemple ?

I really need to get my login done today and go futher with my App pages.
Many thanks

[sylvainbaron]

What does mean these warning?
Thanks

[NewMedia]

Peut-être que l’un d’entre eux pourrait vous aider . .

use https instead of http: for online connection and look at the rest of these reccommendations, perhaps

How to fix Cleartext HTTP traffic not permitted in Android - TREND OCEANS

or maybe this –

3 Ways To Fix the NET::ERR_CLEARTEXT_NOT_PERMITTED Error

[sylvainbaron]

Thanks for your help @NewMedia .
just had a look. But i’m not really sure about what to do… editing AndroidManifest… ok… when? why?
Are these errors important? critical?

These errors also appear with a fresh new mobile project…

(These 2 last weeks experiencing to build our Mobile App are a nightmare… I love Wappler and had great experienced untill this…
The more I try to build our mobile App the more I think Wappler is not dedicated to this at all…

[kfawcett]

Hi @sylvainbaron, I’ve run into the same issues. I’m guessing you’re emulating an Android app?

Android does not allow credentials to be sent across HTTP. I haven’t found a fix for it either.

I wonder if @mebeingken, @Dave, or @bpj have any suggestions.

I did find this one potential workaround, but I’m not sure this is advisable when moving to production.

Dynamic data with cordova and mobile

Thank you very much Jorge, this is the problem, I have added these 2 lines to the config.xml file and it works perfectly … Thanks a lot… [Captura de pantalla 2020-11-11 a las 16.18.07]

[mebeingken]

This is the setup that works for me:

API Project CORS - for Mobile App - help!

Here’s what works for me on iOS and Android. Yes, use credentials on all server connects. In config.xml under the platform android section add the following ( I’m pretty sure this defaults to false and thus could be removed entirely, but I know having it works. ): <preference name="AndroidInsecureFileModeEnabled" value="false" /> For both ios and android sections, include a hostname preference: <preference name="hostname" value="domain.com" /> For ios only add scheme: <pr…

[bpj]

I found, for Capacitor, that there is a different way to specify the server hostname:

in capacitor.config.json add a server property:

{
  "appId": "uk.co.yourid.mobileapp",
  "appName": "You app name",
  "webDir": "www",
  "bundledWebRuntime": true,
  "server": {
    "hostname": "somedomain.com"
  }
}

[kfawcett]

@mebeingken

This is the setup that works for me:

Does this work when testing locally or do you have to push to a server and setup https?

[sylvainbaron]

@bpj Do you think i need to modify also the config.xml as described in @mebeingken post?

<preference name="AndroidInsecureFileModeEnabled" value="false" />  

…

[mebeingken]

I still don’t do any testing locally…I’m too deep into a workflow that excludes that.

[HeikoK]

That’s actually the capacitor way for Cors config.

More details can be found here:

CORS Errors | Ionic Documentation

[kfawcett]

I just created a feature request that would hopefully help all of us developing Android locally. Please vote.

Setup HTTPS on localhost

Many of us are encountering issues with ERR_CLEARTEXT_NOT_PERMITTED when working with Android locally. This request is to enable SSL on the local servers we use, so we do not have to find workarounds to develop our Android apps locally.

[sylvainbaron]

thanks, but how do you deal with this doc? what do we need to add/paste/copy/modify?

[sylvainbaron]

hi @NewMedia
Still have CORS errors after editing the manifest file and creating xml one…

[bpj]

When testing in Chrome (if that is how you are doing it) Wappler uses a port number that changes when you close and reopen your project. You may find it goes from something like localhost:52735 to localhost:51377 when opening in the browser

When it changes, you need to update your web project CORS to have the new port number in the cors array in config.xml (as per Ken’s post linked above)

"cors": {
    "origin": [
      "app://domain.com",
      "app://domain2.com",
      "capacitor://domain.com",
      "http://localhost:51377"
    ]
  },

[sylvainbaron]

Thanks Jamie,
I’was working on Android emulator.

There is a BS5 Capacitor tutorial i’ll try this morning (https://www.youtube.com/watch?v=3YwGbN81Qws).
Can’t waste more time trying to deal with errors…

I really need to deliver a first simple version of our app this week - I’m wondering if there is a quick solution/tool I could use (Adalo? Adalo-Like / learning flutter?) to deliver a first version to would be synched with our Postgresql Database…

[bpj]

From this screenshot it looks like you need both http and https in your cors for the domain:

"cors": {
    "origin": [
      "https://v2.giloo.me",
      "http://v2.giloo.me",
      "app://v2.giloo.me",
      "capacitor://v2.giloo.me",
      "http://localhost:51377"
    ]
  },

[sylvainbaron]

Just tried (config.json + the same hidden file in Wappler / I use Docker)

I also modified AndroidManifest.xml + added network_security_config.xml file just as described in https://kinsta.com/knowledgebase/net-err_cleartext_not_permitted/

I still have the errors…

Maybe I should modify my CORS as below?

[Antony]

I’m planning to start my mobile F7+Capacitor based app in the next couple of weeks, and I’m following this thread with some concern about how that will go…

@George, will there be any new features or documentation from Wappler in the next few weeks that will help with these challenges people are describing?

[jmartland22]

If your trying to use android you need http://localhost in the CORS . Shouldn’t need anything else in the CORS for android only unless some settings have been changed in the capacitor config.