Github PAT on deployment - reactjs

I have a project where I need to use a Github personal access token to hit the GitHub API endpoint. My project is only frontend using React and I deployed using GH-pages. So I believe my problem is in my YAML file, where I create a .env file during build and push the environment variable I set on Github secrets/environment settings. During the CI/CD process, my token gets revoked because it's a PAT, but I made it "scopeless" so it shouldn't be revoked according to the documentation.
OAuth tokens and personal access tokens pushed to public repositories and public gists will only be revoked if the token has scopes.
Have I mistaken something here? I am trying to understand what's going on. So what I think is happening is that this new .env file is being deployed with the project, and I assumed that after the job is complete, it's wiped, but clearly that's not what's happening as the cause for the token being revoked is that it appeared somewhere in my script. It is not.
- run: |
cd ./frontend
touch .env
echo 'REACT_APP_GHTOKEN : ${{ env.REACT_APP_GHTOKEN }}' >> .env
npm install
npm run build
Any advice?

Related

react hosted on S3 having trouble using env files for Auth0 values

This is more of a lack of understanding on my part but I cannot seem to debug this.
I have a react app that I use Auth0 for some authentication stuff.
I recently moved my site on production from using a docket container to running from S3. I thought this was working but its clearly not today it times out when I click login
Request URL: https://undefined/authorize?
This just times out
It works from local host and no longer says undefined it has my auth0 domain
In my react app I store that Auth0 Domain value in a .env file. I am assuming my issue is that react in my S3 bucket does not have my .env file because gitignore. I thought maybe at build that was somehow pulled into a build file ? So when I do npm run build does it do anything with that .env?
How do I use my .env with react running in S3
This assumes that is what my issue is it seems to be.
I had multiple issues going.
Cloudfront was caching my site so as I was debugging I was not viewing my latest code. I had to invalidate cloudfront cache after each push.
I added my Auth0 secrets into github action secret and then used them with an env: section in my github action. That allowed me to use environment variables when github action performed the build.
All works now I was just tangled up for a short time.

How to set .env for react app deployed with azure devops pipeline on app service

I developed a pipeline with CI/CD on azure Devops for deploying a React app on Azure web app service. Locally I'm using a .env file and this file is on .gitignore. I want to know how can i set the .env for reading it on production.
You can check the documentation below:
https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env
.env files should be checked into source control (with the exclusion of .env*.local ).
If you don't want to check in the .env files to DevOps, you could add the variables in the pipeline variables:
In addition, you can refer to the following case for more suggestions:
How to use environment variables in React app hosted in Azure
Many of the proposed solutions related to this issue may not work but I solved it the following way. However, first let me explain why other solutions may not (should not) work (please correct me if I am wrong)
Adding pipeline variables (even though they are environment variables) should not work since a react app is run on the client side and there is no server side code that can inject environment variables to the react app.
Installing environment variable task on the classic pipeline should not work for the same reason.
Adding to Application Settings in azure app service should not work for the same reason.
Having .env or .env.development or .env.production file in a git repo should not be a good practice as it may compromise api keys and other sensitive information.
So here is my solution -
Step1: Add all those .env files to azure devops library as secure files. You can download these secure files in the build machine using a DownloadSecureFile#1 pipeline task (yml). This way we are making sure the correct .env file is provided in the build machine before the task yarn build --mode development in the pipeline.
Step2:
Add the following task in your azure yml pipeline in appropriate place. I have created a github repo https://github.com/mail4hafij/react-yarn-azure-pipeline if you want to see a complete example.
# Download secure file from azure library
- task: DownloadSecureFile#1
inputs:
secureFile: '.env.development'
# Copy the .env file
- task: CopyFiles#2
inputs:
sourceFolder: '$(Agent.TempDirectory)'
contents: '**/*.env.development'
targetFolder: '$(YOUR_DEFINED_PROJECT_ROOT_FOLDER_VARIABLE)'
cleanTargetFolder: false
Keep note, secure files can't be edited but you can always re-upload.

Unable to resolve "./aws-exports" from "App.js"

I have been building an app with awsamplify for quite some time now. Today I descided to run some test and when I did
npm run start-web
Everythin worked fine. Now I went on to run mobile test with the use of Expo and ran
npm run ios & npm run android
which both returned the following errors.
Unable to resolve "./aws-exports" from "App.js"
Building JavaScript bundle: error
my problem is similar to the one below just its amplify and not awsmobile
https://github.com/aws-amplify/amplify-js/issues/669
Deos anyone know what I can do to resolve this?
Thanks alot!
I jsut removed some unused imports and the error changed to this
Unable to resolve "#aws-amplify/ui/dist/style.css" from "node_modules\aws-amplify-react\dist\Amplify-UI\Amplify-UI-Components-React.js"
Barely mentioned in the AWS docs:
For setting up a local dev folder, from an existing amplify repo, use an amplify env pull,
It will "pull" the ./aws-exports.js from the server, the latest one that was pushed there,
similar to git push and git pull but for the amplify env
It's true that an amplify push will create the ./aws-exports.js file,
but it will also "push" it to the server, overwriting whatever is there.
amplify status is also a handy command, similar to git status
I ran amplify env pull
and then found it in the ./src/aws-exports.js
not sure if the pull did it, or if it was always there but this is for an existing expo project
Confing your projects, using terminal go to the main folder and amplify init to config your project
amplify init
Do you to use an existing environment? (Y/n) Y
Choose the environment you would like to use: dev
Choose your default editor: Visual Studio Code
Choose the type of app you're building: javascript
What javascript framework you're using: ionic
Source Directory Path: src
Distribution Directory Path: www
Build Command: npm run-script build
Do you want to use an AWS profile? Y
Please choose the profile you want to use: select your personal IAM profile

Endpoints Issuer attribute not found.

I'm being told the Issuer attribute can't be found on the endpoints object. According to google it should be there: Authenticating Users (Frameworks)
import endpoints
firebase_issuer = endpoints.Issuer(
issuer='https://securetoken.google.com/YOUR-PROJECT-ID',
jwks_uri='https://www.googleapis.com/service_accounts/v1/metadata/x509/securetoken#system.gserviceaccount.com')
#endpoints.api(
name='echo',
version='v1',
issuers=[firebase_issuer])
This is in my backend api which I want to allow firebase authentication.
I'm using Eclipse an the PyDev Google App engine library to write this backend. I'm seeing the error message:
Undefined variable from import: Issuer
or
firebase_issuer = endpoints.Issuer(
AttributeError: 'module' object has no attribute 'Issuer'
when I run it
I had this problem as well. Basically, my interpreter was referencing the gcloud SDK files which only have endpoints-1.0. The quick start has you install endpoints-2.0 to a lib directory that's uploaded with deployment, but the appengine_config.py script that includes it doesn't fire until deployment (I think). I.E. it's undefined locally.
To fix, I just installed endpoints-2.0 by running pip install -r requirements.txt, which points at your local interpreter (mine happens to be a virtualenv). This assumes you use the requirements.txt from the repo in the quickstart: google-endpoints==2.0.4.
This was easiest for me, but I believe there's a way to point a virtualenv at the lib directory that the quickstart has you create and target. This way, your local interpreter would be running off the same package list that GAE would be.

Satis build tells that Authentication failed

I am preparing private package repository using satis. We are using git for versioning our source code. When I use credentials in repository address everything works well, packages.json is where it should be with proper content. But when I remove these credentials and try to build packages.json via
php bin/satis build config.json web/
I get
fatal: Authentication failed
which is understandable. I want to ask is there any other to authenticate to git repo from satis without keeping plain credentails in packages.json? I only add that I can't access repositories via ssh.
Problem solved. I have to use .netrc file and store my credentials there. Everything works like music now.

Resources