Forked project return unauthorized token - reactjs

So I have just completed my coding boot camp and wanted my final React project on my github to show potential employers. I forked my final project from my school's github. Everything was running smoothly prior to when i forked the project, but i wanted to ensure it would load in case other employers want to check it out. I did a git clone to my personal repo and installed all my files including my env files. I did a yarn start only to get this :
invalid request error message - **{"type":"https://httpstatus.es/401",
"status":401, "title":"Unauthorized",
"detail":"Access token invalid or expired"}**
My api and secret keys are still active and my api file from petfinder-sdk i pulled from github to my project handles the token key generation.
link to my repo - https://github.com/mrshawnhum/capstone-starter-mrshawnhum

I don't know how an access token could expire, going to the pointed url points to a very public page describing the "401" error.
If the dependency comes from your code : rewrite your code so that it doesn't make an http request to the web just for fetching a description of an HTTP status. Or at least, doesn't try to authenticate, if the public information is OK.
If the dependency comes from a module : track the culprit, see if you can easily change its behavior (make an unautenticated call ? a config variable at setup ? dropping this module in favor of another one ? ...).

Related

Use private repository from Gitlab 404 error

We want to use the private repository function from Gitlab. For that we created a group and in that group we want to create several projects. I'm able to build versions and packages and publish them using semantic-version. I can see that the packages are visible at the 'Package Registry' page.
But I have trouble installing those packages in other projects using npm install. I only gets a 404 error when I run the install command. I tried several things which I can find in the gitlab docs.
This is how the structure in my account looks like:
root
company (group)
license (project)
auth (project)
The packages are called #company/license en #company/auth, according to the gitlab guidelines.
I want to be able to install all the packages and the future ones, so using the 'instance-level' should be the solution here (altough 'project level' isn't working either).
So, I added
#company:registry=https://gitlab.com/api/v4/packages/npm/
//gitlab.com/api/v4/packages/npm/:_authToken=(personal access token)
to my .npmrc. We are not using our own instance at gitlab.
But when try to run npm install #company/license I get Not Found - GET https://gitlab.com/api/v4/packages/#company%2flicense. That is the same error which I get when I sent a GET request to that endpoint in Postman with my token as Bearer Auth.
This error also occurs when I set the project level url (https://gitlab.com/api/v4/projects/(project id)/packages/npm) in my .npmrc file.
I have tried to using a group url (https://gitlab.com/api/v4/groups/(group id)/packages/) which gives me the packages (in my browser and in postman) but when setting this URL as registry I get the same error.
NPM adds the package name in the URL and that gives indeed a 404.
What I'm doing wrong? I've seen a lot of people have this work, so it must be a stupid thing which I can't see.
I found out that my scope was not correct. I was thinking that the scope was based on the folder where the projects where located,but the scope needs to be the same as your username.
So in my case the scope needs to be #root/license. Where root is of course something like 'company name inc.', so scope will be #company-name-inc. It's the same name which you can see in the URL as first 'page' when you are opening a project or group: https://gitlab.com/company-name-inc/group-name/project-name
In my .npmrc file I can now just add the instance based entrypoint and that will work!
#company-name-inc:registry=https://gitlab.com/api/v4/packages/npm/
//gitlab.com/api/v4/packages/npm/:_authToken=[deploy token]

How to host Laravel/React web application on Heroku

Not sure on which Stack subforum to ask so feel free to correct me.
Question: Can you host Laravel web app with React frontend on Heroku for free? I read something, somewhere, long ago that it can. If any one knows and if also knows any good tutorials/articles for said Laravel+React web app calamity, that would be great.
Ps: I got github repo for said app, so if that helps ...
Mucho kudos in advance.
Edit1:
I figured it out by reading docs and by watching this tutorial
Now i have different problem. Some font files for the app are accessed from public folder. Heroku than says cors not allowed.
I tried creating middleware(example), i also tried with some packages, not sure if it's Heroku or what, but my attempts of tackling this ended to no avail.
What would be my next vector of approach to this problem?
Edit2:
An url to my web app. My web app is using this space .
This is how it would look like when i seed Heroku:
an image from my local machine.
Edit3:
An image of data send by ajax call:
it sends data of user, but not of articles, like they're not seeded at all...
Edit4:
I am surprised? now. I sincerily don't know what i have done, but cors errors have disappeared ... Still seeding still doesn't work ..
Edit5:
Cors error persist still, but only when user get logged in. Don't why is this happening, it's peculiar ... Anyhow, besides these cors errors, images uploaded to storage folder, even after creating symlink on Heroku, don't persist. It must be like it is explained in this SO post. Still, all main functionalities work, that's something right?
Yes, you can!
You can do it by setting the Laravel preset to react (it comes with Vue by default) with:
$ php artisan preset react
This installs all the required dependencies and also creates a dummy Example in your resources directory.
Now you can build the js by compiling your assets with
npm run prod
This will generate your app.js file with all you need to include React components in your views. You can push it to heroku as usual.
I hope it helps :)

Error while deploying react based SSR app, using firebase-functions

I am trying to deploy my SSR app in Firebase originally forked from, after doing some modification in the app.
Which works fine when I do sudo firebase serve --only functions,hosting but throwing error when I do firebase deploy.
The reproducible repo has a package.json.
I am using the public directory as my function directory as well.
However, even if I am using a different function directory for my cloud functions, I see the same errors.
Function failed on loading user code. Error message:
Code in file index.js can't be loaded. Is there a syntax error in your code?
Detailed stack trace: TypeError: c(...) is not a function
at Object.<anonymous> (/user_code/assets/app.server.js:1:28950)
at Object.module.exports.n (/user_code/assets/app.server.js:1:29283)
...
Functions deploy had errors.
To continue deploying other features (such as database), run:
firebase deploy --except functions
Error: Functions did not deploy properly.
It is possible, but you cannot serve static assets with cloud functions. You need a mix of firebase functions and firebase hosting.
The guys at Firebase already thought on this and you also have an implementation available.
Check the following documentation:
Overview
Dynamic Content
Code Example
Youtube Video
Note: There is a delay that you need to take into consideration when using cloud functions.
When a new instance handles its first request, the response time suffers, which is called a cold start
More info
The problem is that firebase hosting only supports SPAs, which means that SSR is out of the picture, you need to run your SSR server in a different env where you can run nextJS, or if you're using a static page generator you could upload the files directly compromising on the ability to refresh the content, although, I'm sure a solution with cloud functions and gatsby is feasable.
Tl;DR: You won't get SSR out of Firebase Hosting

OAuth GitHub Authentication from single page React app

I'm trying to integrate my single page React app with GitHub.
I successfully run first stage of authentication, i.e. receiving redirect with code from https://github.com/login/oauth/authorize
The problem is the second part, i.e. POST to https://github.com/login/oauth/access_token
I can't do POST or GET from my web page itself via JavaScript or JQuery. Using $.ajax or $.post all end up with error Access-Control-Allow-Origin.
The app was created with create-react-app and run with npm start.
How can I avoid Access-Control-Allow-Origin error in my scenario? Is there a way to get GitHub token for GitHub API in some other way?
I've tried to do POST with , and it does not complain on Access-Control-Allow-Origin. In fact after .submit() I receive expected response (as per https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/#web-application-flow) but it comes as a file, which Chrome immediately downloads.

service worker canceling out REST urls

just started working with reactjs recently, month or two..not a pro but can find my way around.. I am using create ract app (quickie ,that ships with service-worker) and my setup is such that I am deploying react app in the root of my java REST application, so all my service rest calls are in relative format, e.g /rest/myservice/123 etc.. and they work just fine..
but recently I started getting strange errors, and rest calls stopped working..
if I execute RET URL from browser .... nothing happens index loads... when I test with postman REST works just fine it also works in safari or if url is localhost... ...so after hours of frustration i discovered that service worker doing its .... caching . my rest calls are getting intercepted and they never make it to server... and there is nowhere that it mentions about how to overcome it, neither in service worker docs nor in create-react-app docs ...nothing is mentioned about this use case...... this is so pathetic...
I figured it out after numerous trail and errors... but it did not stop there..
I went ahead and deleted the service-worker registration entry from index.js also deleted service-worker file and rebuild the app. well service-worker.js file is still there... it showed up in build folder after I rebuild the project..... what is it with create-react-app did they got paid by google to include service-worker? or what is going on? why can not I remove it? and how do I prevent it from canceling my rest url calls?
when I type : https://xxxx.io/x/referal/refCode/3429878 it just loads application...
what else am I missing?
got the answer over #Redit needed to unregister worker...
details #:
https://www.reddit.com/r/reactjs/comments/8hovvb/removal_of_serviceworker_from_reactjs_app/

Resources