Publish React app to Github Pages using github Actions - reactjs

Question

I made a simple Reactjs app and now I want to publish it on gh-pages.
I followed this Facebook tutorial for deploying it and it is also getting deployed from my PC. But now instead of every time manually deploying it, I thought of using Github Actions to deploy on every push to the master branch. so I wrote the below Action.
name: gh pages publish
on:
push:
branches: master
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- uses: actions/setup-node#v1
with:
node-version: 12
registry-url: https://registry.npmjs.org/
- name: publish package
run: |
yarn
npm run deploy
But this action fails because it requires the user to input the username and password.
> gh-pages -d build
fatal: could not read Username for 'https://github.com': No such device or address
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! timetablemanager#0.1.0 deploy: `gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the timetablemanager#0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/runner/.npm/_logs/2020-06-21T07_07_19_700Z-debug.log
##[error]Process completed with exit code 1.
How can I fix this?
Edit:
Here is the package.json file
{
"homepage": "http://itissandeep98.github.io/TimeTableManager/",
"name": "timetablemanager",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"bootstrap": "^4.5.0",
"bootstrap-social": "^5.1.1",
"font-awesome": "^4.7.0",
"gh-pages": "^3.1.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Answer 1

According to the create react app github pages troubleshoot here, you need to do the following.
Create a new Personal Access Token
git remote set-url origin https://<user>:<token>#github.com/<user>/<repo>.
Try npm run deploy again
Also make sure everything in your package.json is correct, but this definitely looks like an authentication issue.

Answer 2

Putting this here for those looking to do the same as the OG:
I created and added a personal token, and also faced some more issues.
Here are the changes I ended up making on the action file:
- name: setup git authentication
run: |
git config --global user.email "<me>#<gmail>.com"
git config --global user.name "<my_name>"
git remote set-url origin https://<user>:<token>#github.com/<user>/<repo>
- name: publish
run: |
yarn
npm run deploy

Answer 3

for anyone else who ends up here, you can use the secrets.GITHUB_TOKEN that is available on every action, without setting it directly in the settings for your repo.
use Joey Baruch's answer above, just replace <token> with:
${{ secrets.GITHUB_TOKEN }}
P.s. stackoverflow wont let me comment yet so I had to post this as a separate answer.