Couldn't solve firebase .env with react - environment-variables

I can not connect with localhost when I put my code in .env file in React app. It shows some warnings and the page will blank. But without the .env for firebaseconfig object everything is good. Here is the code...
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID

Related

Defining a property via process.env in javascript

I'm new to JavaScript and stuck.
I'm writing my first "real" Electron App and want to connect via sftp. (ssh2-sftp-client to be more specific)
When I set up the connection like the example:
sftp.connect({
host: '192.168.76.173',
port: '22',
username: 'Backup',
password: 'PasswordInPlainText'
}).then(() => {
return sftp.list('/Backups/Server');
}).then(data => {
console.log(data, 'the data info');
}).catch(err => {
console.log(err, 'catch error');
});
everything works like a charm. But when I try to "hide" my credentials in an .env file:
sftp.connect({
host: process.env.HOST,
port: process.env.PORT,
username: process.env.USERNAME,
password: process.env.PASSWORD
}).then(() => {
return sftp.list('/Backups/Server');
}).then(data => {
console.log(data, 'the data info');
}).catch(err => {
console.log(err, 'catch error');
});
I get the error message:
Error: connect: getConnection: All configured authentication methods failed
I checked via
console.log("Host to connect: "+ process.env.HOST)
and the correct output is:
Host to connect: 192.168.76.173
The content of the .env File is
HOST='192.168.76.173'
PORT='22'
USERNAME='Backup'
PASSWORD='PasswordInPlainText'
So this my first time working with environment Variables at all, so I'm guessing I misunderstood something, or a JavaScript property can't be defined by a string this way.
Your problem is that the .env files are not supported in NodeJS by default and you might have some env variables already with the same names and different values (defined in the system probably).
You could either use a NPM package like dotenv or parse the contents of the file by yourself.
You could also test it like that:
// Place this code before you use the ENV variables.
// Replace the `<variables>` with the real data
// and test if your code works with the ENV variables.
process.env.HOST = '<your host ip>';
process.env.PORT = '<your port>';
process.env.USERNAME = '<username>';
process.env.PASSWORD = '<password>';

Gatsby .env.production variables - undefined

When building a Gatsby project I'm getting all env variables undefined in production environment.
In development everything is fine.
I have 2 similar .env.development and .env.production files.
In my gatsby-config.js I have
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`,
});
and if I console.log(process.env.NODE_ENV) during gatsby build it gives production and the variables can be accessed and logged out.
But later in code something like
return request.post(`${process.env.GEOCODING_CF_URL}/latlng`, {...});
gives request to http://localhost:9000/ru/undefined/latlng.
What am I doing wrong and how this issue can be fixed?
UPDATE:
When I run gatsby build - process.env.NODE_ENV is production
When I run gatsby serve - process.env.NODE_ENV is undefined
If this can help in any way.
If you use environment variables in node you don't need a prefix (like in your gatsby-config.js). However, if you need to use them in a component or a page you must add GATSBY_ as a prefix, so GEOCODING_CF_URL should be GATSBY_GEOCODING_CF_URL
For me, NODE_ENV=production yarn gatsby serve did the trick.
https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/
Accessing Environment Variables in the browser.
By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret and not exposed to anyone visiting the site.
To expose a variable in the browser, you must preface its name with GATSBY_. So GATSBY_API_URL will be available in browser code but API_KEY will not.
Variables are set when JavaScript is compiled so when the development server is started or you build your site.
src/pages/index.js
Copysrc/pages/index.js: copy code to clipboard
import React, { useState, useEffect } from "react"
function App() {
const [data, setData] = useState()
useEffect(async () => {
const result = await fetch(
`${process.env.GATSBY_API_URL}/users`
).then(res => res.json())
setData(result.data)
})
return (
<ul>
{data.map(user => (
<li key={user.id}>
<a href={user.url}>{user.name}</a>
</li>
))}
</ul>
)
}
export default App

How to implement SSL Key Pinning in iOS in Ionic 3?

I did not have much knowledge in iOS classes. I am building an iOS app(Ionic 3) which required the SSL pinning. Most of the google example based on swift. May I know the steps or could anybody provide some links regarding iOS SSL pinning?
PS: I already have a certificate in my server. Also, I have done the SSL pinning with Network security configuration for Android. Ref https://developer.android.com/training/articles/security-config. Its working fine.
Thanks in advance.
Ionic 5.4.15 version solution.
To enable SSL pinning in ionic create a directory inside your root folder e.g. "certificates" and put all your certificates inside this folder.
IMPORTANT: all certificates inside this folder must have suffix .cer!!!
After that modify angular.json in root project directory
append this part to all occurencies of "assets" array.
{
"glob": "**/*",
"input": "certificates",
"output": "certificates"
}
then delete your www directory in root project and run "ionic build",
it will generate new subdirectory "certificates" in your www folder
USE of certificates in Typescript:
I am using ionic-native http and cordova-advanced-http-plugin
Install:
ionic cordova plugin add cordova-plugin-advanced-http
npm install #ionic-native/http
Import in your root, xyz.module.ts file:
import { HTTP } from '#ionic-native/http/ngx';
Append it to providers:
providers: [
StatusBar,
SplashScreen,
**HTTP**,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
Import in your page/component, xyz.ts file:
import { HTTP } from '#ionic-native/http/ngx';
Declare in constructor:
constructor(private http: HTTP) {}
Pinning the certificates before any request made:
async ngOnInit() {
await this.platform.ready();
this.advHttp.setServerTrustMode('pinned').then((res: any) => {
}, (error) => {
this.helpers.showError(error);
});
this.advHttp.setRequestTimeout(5);
}
Now youre all set and may use https requests!
Docs:
https://ionicframework.com/docs/native/http

"Client does not support authentication protocol requested by server; consider upgrading MySQL client" even after downgrading to mysql#5.7

I was originally on mysql 8.0 which gave me the error
ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client
when trying to run my server. I saw on multiple sources that downgrading to mysql#5.7 would solve the problem because 5.7 uses native password authentication, but the same error is still present after downgrading to the earlier version. Are there any other known reasons as to why the error still persists?
Here is my config file:
config.js
// import dependencies
const util = require("util");
const mysql = require("mysql");
// import environment variables
const env = {
env: process.env.NODE_ENV,
host: process.env.DB_HOST,
database: process.env.DB_NAME,
user: process.env.DB_USER,
password: process.env.DB_PASSWORD
}
const database = mysql.createConnection({
host: env.host,
database: env.database,
user: env.user,
password: env.password
});
database.connect(err => {
if (err) {
console.log("Connection " + err);
} else {
console.log(`Connection Success: You are now connected to the ${env.env} database`);
}
});
// promisify all database queries
database.query = util.promisify(database.query);
// export database
module.exports = database;
MySQL 8.0 introduced a default SHA256 encryption that many clients do not understand. You have many options, the easiest being using the older MySQL native password (see https://mysqlserverteam.com/upgrading-to-mysql-8-0-default-authentication-plugin-considerations/) authentication. Change the account to use the older authentication and your client connector will be happy.

Use process.env variable in typeorm.forroot

Following this guide: https://docs.nestjs.com/techniques/sql
When I try to use process.env.DB_PASS in connection options, no password is passed into mysql. When I pass a raw string, it works. Dotenv config was done prior to nest app module creation.
What would be the best way to do this correctly?
#Module({
imports: [
TypeOrmModule.forRoot({
type: 'mysql',
host: 'localhost',
username: 'root',
password: process.env.DB_PASS,
database: 'dbname',
entities: ['./models/*.entity{.ts,.js}'],
synchronize: true
})
],
controllers: [],
components: []
})
export class AppModule implements NestModule {...}
We are using env variables in our call to forRoot and it works. I assume your module file (the typescript file containing this code) is imported (import) before dotenv does the work. dotenv should be the very first thing imported/done by your app, except if you have very good reasons to do something else.

Resources