Let's say I'm trying to build a web application using Vue.js where an end user uses a form to subscribe to a newsletter. The frontend is a Vue app, the backend is a PHP REST API.

The API requires Basic Auth authentication.

In the frontend I'm calling the API using axios:

axios
    .post('localhost/api/v1/subscriber.php', {
        // I know the data is missing but this is not what the question is about..
        auth: {
            username: 'USER',
            password: 'PASS'
        }
    })

Everything is working fine, except that Vue.js is JavaScript and therefore visible on the client side (right click -> Inspect/ View page source) and every end user can see the username and password.

What's the best practice for "storing" the password (and username)? Even if PASS was the hashed password, the end user would still be able to use it to to an API call by himself...

Let's say I'm trying to build a web application using Vue.js where an end user uses a form to subscribe to a newsletter. The frontend is a Vue app, the backend is a PHP REST API.

The API requires Basic Auth authentication.

In the frontend I'm calling the API using axios:

axios
    .post('localhost/api/v1/subscriber.php', {
        // I know the data is missing but this is not what the question is about..
        auth: {
            username: 'USER',
            password: 'PASS'
        }
    })

Everything is working fine, except that Vue.js is JavaScript and therefore visible on the client side (right click -> Inspect/ View page source) and every end user can see the username and password.

What's the best practice for "storing" the password (and username)? Even if PASS was the hashed password, the end user would still be able to use it to to an API call by himself...

• javascript
• rest
• vue.js
• axios

• 1 Any HTTP request the browser can make can be pletely viewed by the user. You literally cannot hide anything – Phil Commented Sep 23, 2019 at 7:42
• You don't save a the username and password at all. The best thing would be to save a token which was generated by your server. Anyways that's a more a problem for the user because if he saves the password for a specific website anyone with physical access (to his puter) can see the password. – kevinSpaceyIsKeyserSöze Commented Sep 23, 2019 at 7:49
• If you're really concerned about the security of your API, don't use HTTP Basic authentication, especially with shared credentials. Set up an OAuth authorisation flow where the user supplies their own credentials. See oauth./oauth2-servers/single-page-apps – Phil Commented Sep 23, 2019 at 7:53
• @Phil I do understand the problem but I've never seen a website that wants a user to log in/ register before subscribing to a newsletter... It seems like the only possible solution is to not use the API and just handle everything with PHP on the same page? – Alon Dattner Commented Sep 23, 2019 at 8:53
• Perhaps you want the client credentials authorisation flow then though it's not very different to what you've already got – Phil Commented Sep 23, 2019 at 23:58

3 Answers 3

From my point of view you have a fundamental design issue with your API. As it seems you want to expose some global credentials to the frontend so the SPA can in turn authenticate against the API. This approach is strange: either the endpoint is public and therefore should not need authentication or it is protected and each user should authenticate properly.

If you just want to protect the API against spam bots etc. you could send a nonce to the app and check for it in the subsequent request. This by no means is a robust protection but makes sure that each POST requires a GET and some parsing on the spammer's side.

If you want your users to be authenticated across multiple requests you should use well established methods to provide a session or a remember-me function. This could be e.g. session cookies (works but is vulnerable against CSRF attacks), JWT (with or without OAuth) or something similar.

But whatever you do: don't try to obfuscate shared credentials you pass around!

As a best practice, you shouldn't store password. You should create a JWT token on the backend when the user logged in or signed up. Then you can store the JWT token on your front-end(local storage) when you received the token from the back-end.

Easy Way to Encryption, You can encrypt your password with any encryption algorithm on client-side then decrypt on the back-end with the same key.

Hard Way to Encryption, As a hard way, for security reasons and security best practices, you should encrypt all your request end to end. Otherwise, anyone can access the user's information on public networks.

The below link includes all detailed information about the end to end encryption https://medium./@weblab_tech/encrypted-client-server-munication-protection-of-privacy-and-integrity-with-aes-and-rsa-in-c7b180fe614e

You can store your Authorization header values in localStorage or sessionStorage.

Use interceptors to include the header values for each of your request

Here is sample:

axiosInstance.interceptors.request.use(function (config) {
  const token = localStorage.getItem('token')
  config.headers.Authorization =  token

  return config;
});

The value of Authorization header, stored in LocalStorage, will be automatically each time you make HTTP requests.

Note: Replace the variable token with username and password