web-dev-qa-db-fra.com

Protection par mot de passe simple pour l'application React sur Heroku

J'ai une application React simple, créée avec create-react-app, que j'aimerais déployer sur Heroku (ou quelque chose de facile) et protégée par un mot de passe. La protection peut être très simple: un seul mot de passe suffit.

J'ai commencé à chercher dans l'authentification de base HTTP mais je n'ai pas trouvé de réponse facile. Le plus proche que j'ai trouvé était dans ce message , mais (a) je n'aime pas l'idée de devoir éjecter mon application, et (b) je ne pouvais pas le faire fonctionner. J'espérais pouvoir trouver un plugin Heroku, mais pas de chance là non plus.

Il ne serait pas trop difficile d'écrire un composant qui enveloppe mon application et demande un mot de passe avant de le montrer. Le problème est qu'il s'exécute côté client. Je veux stocker le mot de passe correct côté serveur (ou un hachage de celui-ci) et que l'application envoie les tentatives de mot de passe au serveur.

Puisque create-react-app fonctionne au-dessus de Node, j'espère qu'il existe un moyen facile de lui dire d'exécuter et de stocker certaines choses sur le serveur, mais je me trompe peut-être. Aucune suggestion?

reactjsauthenticationherokupassword-protection
8
Dave Feldman

Ce buildpack create-react-app semble prendre en charge l'authentification de base http:

https://github.com/substantial/create-react-app-buildpack

https://elements.heroku.com/buildpacks/substantial/heroku-buildpack-static

4
Jed Richards

Je suppose que vos intentions sont de vouloir protéger la configuration de Heroku afin que d’autres personnes ne puissent pas accéder à votre base de données avec vos identifiants.

Pour protéger mon déploiement sur heroku, j'ai utilisé un mot de passe pour créer un fichier keys_prod.js contenant les fichiers de configuration Heroku de ma base de données mLab dans mon backend en utilisant express et mongoDB:

fichier keys_prod.js:

module.exports = {
  mongoURI: process.env.MONGO_URI,
  secretOrKey: process.env.SECRET_OR_KEY
};

fichier keys.js:

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./keys_prod');
} else {
  module.exports = require('./keys_dev');
}

dans mon fichier server.js, j'ai ajouté:

// DB Config
const db = require('./config/keys').mongoURI;

// Server static assets if in production
if (process.env.NODE_ENV === 'production') {
  // Set static folder
  app.use(express.static('client/build'));

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

Cela vous permet de demander les paramètres de configuration que vous avez remplis dans heroku sans les inclure dans votre rapport.

3
Samsoedien

Si vous utilisez Node dans le backend, vous pouvez utiliser Passport Basic Auth

app.get('*', passport.authenticate('basic', { session: false }), (req, res) => {
  res.sendFile(path.join(`${__dirname}/../build/index.html`))
})

Chaque fois que vous accédez à la page dans le navigateur, une fenêtre contextuelle vous demandant votre nom d'utilisateur et votre mot de passe apparaît.

2
froston