B4J Question BANanoVuetifyAD3 SignIn, authentication and AppBar

Star-Dust

Expert
Licensed User
I noticed using the SignIn example that if I log into the www.mywebsite.org/AppName/#/home page, it can log in without being authenticated.
It is a problem if the person manages to enter the pages by saving the address and recalling the history without having to authenticate.

Is it a solvable problem?

Is it possible to send a SessionID and read it to verify that those who surf are authenticated?

Furthermore, is it possible to know which is the previous page that called up the current one?
 

Mashiane

Expert
Licensed User
It is a problem if the person manages to enter the pages by saving the address and recalling the history without having to authenticate.
Yes it is a huge problem.

Is it a solvable problem?
As thes were just beginner videos, none have a user management & permission system implemented, so yep, its solvable.

Is it possible to send a SessionID and read it to verify that those who surf are authenticated?
I'm sure with the BANano.Session variable it can be done, there are also BANano.Cookies, I have not explored those as I have never really worked on an app that requires them yet. Can you please elaborate in terms of the approach you would like to follow. I will test.

Furthermore, is it possible to know which is the previous page that called up the current one?
There is something on the router that is able to execute "before" and "after" showing the page. I havent explored it yet. Will keep you posted. I think with that one will be able to see the "page" info.
 
Upvote 0

Star-Dust

Expert
Licensed User
I partially solved. I just need one thing I haven't been able to do.

In the form of example SignIn the email address and password are displayed. These are the fields that are used for authentication.
In the DB I have 3 camps. The third camp is the Token that is generated at the time of authentication.

I need to write the token in the DB but I failed ... here is the original source of the example with my addition.

B4X:
Private Sub registerDS_Exists (Success As Boolean, Response As String, Error As String, affectedRows As Int, Result As List)
    'stop loading of the ok button
    loginDialog.UpdateOkLoading(login, False)
    If Success Then
        If Result.Size = 0 Then
            'the email address was not found
            vuetify.ShowSwalToastError("The email address you have entered could not be found!", 2000)
            Return
        End If
        'the email was found, we need to verify the email address
        'get the first record
        Dim fr As Map = registerDS.GetFirstRecord
        'find if the hashes match
        'the entered user details
        Dim user As Map = login.GetData("user")
        Dim semailaddress As String = user.Get("emailaddress")
        Dim spassword As String = user.Get("password")
        'create a hash based on the email address and password
        Dim userhash As String = vuetify.Md5Hash(semailaddress, spassword, False)
  
        '
        'get the hash of the saved profile
        Dim savedhash As String = fr.Get("password")
        'check match
        If userhash = savedhash Then
            'vuetify.ShowSwalSuccess("Welcome to our WebApp, you have been successfully signed in!")
            'the user is authenticated
            vuetify.Authenticated = True
          
            ' My Add - do not work
            Dim myToken As String = $"SD${DateTime.Now}"$
            banano.SetCookie("myToken",myToken, $"{"expires": 7}"$)
            user.Put("token",myToken)
            registerDS.UPDATE_MODE        ' we set the mode
            registerDS.SetRecord(user)    ' we use the newly updated object
            registerDS.CREATE_OR_UPDATE
            ' end ' do not work

            'navigate to the home page
            vuetify.NavigateTo("/home")
        Else
            vuetify.ShowSwalError("Your profile could not be validated! Please try again!")     
        End If
    End If
End Sub


In RegisterDS I have also selected the token field
1632589710783.png
 
Upvote 0

Mashiane

Expert
Licensed User
I partially solved. I just need one thing I haven't been able to do.

In the form of example SignIn the email address and password are displayed. These are the fields that are used for authentication.
In the DB I have 3 camps. The third camp is the Token that is generated at the time of authentication.

I need to write the token in the DB but I failed ... here is the original source of the example with my addition.

B4X:
Private Sub registerDS_Exists (Success As Boolean, Response As String, Error As String, affectedRows As Int, Result As List)
    'stop loading of the ok button
    loginDialog.UpdateOkLoading(login, False)
    If Success Then
        If Result.Size = 0 Then
            'the email address was not found
            vuetify.ShowSwalToastError("The email address you have entered could not be found!", 2000)
            Return
        End If
        'the email was found, we need to verify the email address
        'get the first record
        Dim fr As Map = registerDS.GetFirstRecord
        'find if the hashes match
        'the entered user details
        Dim user As Map = login.GetData("user")
        Dim semailaddress As String = user.Get("emailaddress")
        Dim spassword As String = user.Get("password")
        'create a hash based on the email address and password
        Dim userhash As String = vuetify.Md5Hash(semailaddress, spassword, False)
 
        '
        'get the hash of the saved profile
        Dim savedhash As String = fr.Get("password")
        'check match
        If userhash = savedhash Then
            'vuetify.ShowSwalSuccess("Welcome to our WebApp, you have been successfully signed in!")
            'the user is authenticated
            vuetify.Authenticated = True
       
            ' My Add - do not work
            Dim myToken As String = $"SD${DateTime.Now}"$
            banano.SetCookie("myToken",myToken, $"{"expires": 7}"$)
            user.Put("token",myToken)
            registerDS.UPDATE_MODE        ' we set the mode
            registerDS.SetRecord(user)    ' we use the newly updated object
            registerDS.CREATE_OR_UPDATE
            ' end ' do not work

            'navigate to the home page
            vuetify.NavigateTo("/home")
        Else
            vuetify.ShowSwalError("Your profile could not be validated! Please try again!")  
        End If
    End If
End Sub


In RegisterDS I have also selected the token field
View attachment 119574
Q1. Does your DB table have the 'token' field?
Q2. On the code have you generated code on the DS for the _create(succes??) and _update(success) callbacks? CREATE_OR_UPDATE returns either _CREATE / _UPDATE based on your mode.
If all these exists, try and log(Error) on the _Update(success...) callback and see what the error is.
 
Last edited:
Upvote 0

Star-Dust

Expert
Licensed User
Q1. Yes
Q2. No. I've been using Banano for a few days, I didn't even know these events existed. I will try and update you
 
Upvote 0

Star-Dust

Expert
Licensed User
In addition to the videos, is there a documentation of the DataSource events or of the Vuetify elements anyway?
I cannot find a place where written documentation of VuetifyAD3 is collected.

I inserted the DataSource_Update event. The variable success = false, Result = "Sucess" while Error return nothing
 
Last edited:
Upvote 0

Star-Dust

Expert
Licensed User
I noticed using the SignIn example that if I log into the www.mywebsite.org/AppName/#/home page, it can log in without being authenticated.
It is a problem if the person manages to enter the pages by saving the address and recalling the history without having to authenticate.

Is it a solvable problem?

Is it possible to send a SessionID and read it to verify that those who surf are authenticated?

Furthermore, is it possible to know which is the previous page that called up the current one?
Another thing I observed is that if you enter the address of a specific page, the side menu bar does not appear. So after logging in if you go to a page you have a weird effect

1632643081909.png

But it should be

1632643133290.png
 
Upvote 0

Mashiane

Expert
Licensed User
'the user is authenticated vuetify.Authenticated = True
Vuetify.Authenticated use means

1. When false - means the navigation bar + drawer should be hidden.
2. When true - means the navigation bar + drawer should be shown.

Now, here is the interesting part (when done MANUALLY WHILST THE APP IS RUNNING)

1. Entering an address in the address bar
2. Clicking Refresh on the browser
3. Doing anything in the address bar like changing it

Restarts the Session

Solution: Save & Retrieve your session state.
(Now this is not implemented yet in any of the examples I've done so far.)

You have a couple of choices to save and retrieve app state, these are:

1. Use BANanoSQL (not tested yet)
2. Use Cookies (Not tested yet)
3. Use LocalStorage (Currently using this option myself)

As an example, after authenticating users on the login page, you could execute

B4X:
BANAno.SetLocalStorage("authenticated", vuetify.Authenticated)

Now, when any page is opened, first you check if the user is authenticated, i.e. browser refresh, browser change address done manually, first read etc.

B4X:
'get authenticated state from local storage
dim bAuthenticated as boolean = BANano.GetLocalStorage("authenticated")
if BANano.IsNull(bAuthenticated) Then
vuetify.Navigateto("/loginpage")
return
end if
vuetify.Authenticated = bAuthenticated.

I will add a method in the next version called .SaveSessionState and .GetSessionState which will save and retrieve complete session state to BANanoSQL.
LocalStorage is limited in size and Session State could be large. This needs to be done on each page.
 
Upvote 0

Star-Dust

Expert
Licensed User
I had implemented a similar thing with cookies which I guarantee you work. But they remain stored even the next time the page is reopened.

I will try with a local variable, it seems to me the best solution. Thanks for your help

PS. I had also tried with SQL as I wrote in the first post but without results.
 
Upvote 0

Star-Dust

Expert
Licensed User
On yes, perhaps variables stored in a code module or perhaps main.
I tried it seems to work correctly as I intended.

If I can get UPDATE to work in RecordDS and the grid as well, I will ditch php and use Vuetify for my WebApps
 
Upvote 0

Star-Dust

Expert
Licensed User
How large can a cookie store? Can one store a JSON?
I think so, it is possible.
The only problem I encountered is to put in how long it will remain in memory. You can indicate a date or a duration.
I needed him to stay only for the session.

Using StoreSession I wasn't getting good results
 
Upvote 0

Mashiane

Expert
Licensed User
I think so, it is possible.
The only problem I encountered is to put in how long it will remain in memory. You can indicate a date or a duration.
I needed him to stay only for the session.

Using StoreSession I wasn't getting good results
StoreSession wont work as its page is it own session and gets terminated on refresh

Thanks, I will try the cookies out..
 
Upvote 0

Star-Dust

Expert
Licensed User
I have to correct myself. Unfortunately it doesn't work
I added in onmounted initialization to insert control when page loads
B4X:
Sub Initialize(v As VuetifyApp)
    'establish a reference to the app
    vuetify = v
    'initialize the component
    one.Initialize(Me, name)
    one.vuetify = vuetify
    path = one.path
    '
    'build the page html here
    banano.LoadLayout(one.Here, "view1")
 
    'add this route component to the app
    one.SetMounted(Me, "onmounted", Null)
    vuetify.AddRoute(one)
    Log(one.HTML)
 
End Sub

Private Sub onmounted            'ignoreDeadCode
    Dim bAuthenticated As Boolean = banano.GetLocalStorage("authenticated")
    If banano.IsNull(bAuthenticated) Then
        vuetify.Navigateto("/")
        Return
    End If
    vuetify.Authenticated = bAuthenticated
End Sub

It seems to work when you take the right path starting from the Home.

But if you start directly from page one, it doesn't get initialized and doesn't do onmounted or even the authentication check.

There will be a way to get it to run by App.js. I was thinking of a Vue that immediately generates a newly loaded event. Unfortunately I'm just starting out.

Update: After some reflection I think it's not okay for App.js to verify authentication. It is possible to read the source.
Furthermore, the local variables remain stored and do not disappear when the browser is closed
I think the best thing is that I have to write this part in php and it is done on the server side.
Unfortunately, I believe that at the moment I cannot use it for the purpose I need. It's great for creating good graphics
 
Last edited:
Upvote 0

Mashiane

Expert
Licensed User
In addition to the videos, is there a documentation of the DataSource events or of the Vuetify elements anyway?
Everything we have done is documented in the Kitchen Sink, this is available:

Online: https://mashiane.github.io/BANanoVuetifyAD3/#/
You can also run the Kitchen Sink Locally (FreeSources Folder). There is also a kitchen sink for the B4J jetty aka BANanoServer
There is also source code from the FreeSources Folder: https://github.com/Mashiane/BANanoVuetifyAD3/tree/main/FreeSources

Also there is a documentation page, you select a component and it gives you "the property bag content"

This has been done to allow people "to learn" from the property bag "Description" field about what each property does. Some things though are not updated as others due to time constraints.

Documentation.png


Personally I still think the best best to learn Vuetify is their website. What we have done here is just re-create their API (here is an example of the V-Alert API) to work around BANano and Vuetify. Yes there are some specialized components we have created to suit "own own needs", like the DataSource, VMsgBox, VueTable, VForm and VFields.

The information in the documentation is updated with each new release, so it will be updated in the new release as more functionality and comments and updates to "property bags" has taken place.

Above that, people are always encouraged to ask questions.
 
Upvote 0

Star-Dust

Expert
Licensed User
Everything we have done is documented in the Kitchen Sink, this is available:

Online: https://mashiane.github.io/BANanoVuetifyAD3/#/
You can also run the Kitchen Sink Locally (FreeSources Folder). There is also a kitchen sink for the B4J jetty aka BANanoServer
There is also source code from the FreeSources Folder: https://github.com/Mashiane/BANanoVuetifyAD3/tree/main/FreeSources

Also there is a documentation page, you select a component and it gives you "the property bag content"

This has been done to allow people "to learn" from the property bag "Description" field about what each property does. Some things though are not updated as others due to time constraints.

View attachment 119616

Personally I still think the best best to learn Vuetify is their website. What we have done here is just re-create their API (here is an example of the V-Alert API) to work around BANano and Vuetify. Yes there are some specialized components we have created to suit "own own needs", like the DataSource, VMsgBox, VueTable, VForm and VFields.

The information in the documentation is updated with each new release, so it will be updated in the new release as more functionality and comments and updates to "property bags" has taken place.

Above that, people are always encouraged to ask questions.
Thanks for the directions. I understand that you are unable to update the documentation.
I have already seen and downloaded kitchen a few days ago.

You did an amazing job integrating Vue. I understand also that it is growing and will have to change many times.

I am evaluating all aspects before moving on to develop the WebApps on Banano and Vuetify
 
Upvote 0
Top