How to properly use 0Auth with a Vue SPA without leaking sourcecode?

Question

I am currently making a platform for which the user has to login with a Google account to access it. I followed a Auth0 tutorial, which uses a simple v-if to see if the user is authenticated or not. But even if the user is not logged in, he can still look through the compiled .js file and search for keywords like apiKey and api_key.

How to prevent this from happening, and only give the source code to users who are really authenticated? How is this normally done?

Answer 1

The private things are usually fetched from a backend through an API. Hence, the code that you're shipping is public all along (it's client side app).

The v-if will make sure that the template is matching if the user is authenticated or not. But there will be no sensitive data sent until your user is authenticated. So, all the job is to be done on the backend: making sure that the token is valid and sending the data just then.

So, you don't need to hide the source code or anything alike. Of course, this assumes that you do not have sensitive code in your Github repo (no clear tokens, no sensitive hard coded HTML, etc).

Answer 2

Re-wrote your code for __div__. I believe this is what you are asking for (I also made it divide only by int)

def __div__(self, other):
    if other == 0:
        return 0

    # Other than 0, food values can only be divided by an int
    if not isinstance(other, int):
        return NotImplemented

    selfname = self.name
    if '+' in selfname:
        # Quick and dirty grouping symbol
        selfname = f'({selfname})'

    return FoodValues(
        f'{other} {selfname}',
        self.fat / other,
        self.carbs / other,
        self.protein / other,
        self.serv_size / other,
        self.calories / other,
    )

(I believe it is div, let me know if not)