GitHub API Authentication for GraphQL: How do I publish my app publicly if it needs authentication? - api

Per the GitHub V4 API, using GraphQL requires authentication. The GitHub API V4 docs state the following:
Warning: Treat your tokens like passwords and keep them secret. When working with the API, use tokens as environment variables instead of hardcoding them into your programs.
This is understandable. However, I'd like to publish my source code on GitHub and host the app on GitHub Pages.
Question: If I set up the authentication token as an environment variable, how will the actual app itself, once published, be able to use GraphQL to authenticate? Won't it break?

If you're using server-side code, set the environment variable and be done with it.
If you're using GitHub Pages, you can't host a server-side app.
GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository.
GitHub Pages is a static site hosting service and doesn't support server-side code such as, PHP, Ruby, or Python.
It's only for static files: HTML, CSS, Javascript. These are executed in the browser. There is no environment variable to set. No place to hide secrets from the user.
Instead, build it as an OAuth App. OAuth allows the user to authorize your web site to use their account to access the Github API. This is how Github's own GraphQL API Exporer works.

Related

Passing a jwt from a non-vue.js portal to a vue.js application

I'm trying to figure out the best (and possibly secure) way to pass a jwt from a web application to another (vue-based). The first web application is a portal where an user authenticates itself (with a backend that produces a jwt) and then (with an hyperlink) is redirected to a vue.js application that needs the same jwt to interact with its backend.
The two backends share a private key used to sign and validate the jwt, so that with the same jwt produced by the portal backend the vue app can access private data on its own backend.
I've tried using query parameters when redirecting to the vue.js app, but i don't like this solution and i was wondering if there's something better i can do.
Notes:
The portal frontend is written with a proprietary code generator that can't (probably) execute javascript code to use sessionStorage or localStorage. The portal backend is written with the same generator but could be extended using C# (don't think this is relevant).
The vue frontend is a SPA that uses Vue-Router and Pinia as storage, while the vue backend is written in Java using Quarkus (this shouldn't be relevant too).

How can we link a Docusaurus website to a database?

I'm building a website with Docusaurus V2.
Since a Docusaurus website is fundamentally a React app, I wonder how we could add an authentication system to the website.
Is there any guide or sample where a Docusaurus website is linked to a database, a backend, or call APIs?
You could inject a script that initializes some form of authentication when the website first loads. Have a look at docusaurus-plugin-google-analytics, this is an example of injecting the GA script into a website.
To make database calls, you would need a server with a REST/GraphQL API. You can make calls from the UI using AJAX/fetch.
To implement a very basic form of auth where you prevent unauthorized people from even accessing the website, you could implement auth at the web server level using Basic access auth.
Docusaurus websites are fundamentally for static documentation and they are best for building websites where everyone should see the same thing. If you want to selectively show content depending on the user, then maybe going with a server-side approach would be better.

How trust azure active directory bearer token in flask api service (SPA)

I have to replace a backend api from netcore to flask python.
The backend is serving apis for a single page application that's autenticate to Azure Active Directory via oauth 2 implicit flow.
Both application (Single Page and Backend) are separately registered on Azure Active Directory and this article is a good description of my scenario.
https://devblogs.microsoft.com/premier-developer/using-adal-js-with-angular4/
Actually I'm trying to implement oauth api protection by flask backend, but the documentation and resources that i found starts always from a login.
In my case, login is performed by an angular app (with adal.js) via implicit flow, than all protected apis requests has bearer token that backend should manage.
I've tried authlib, flask-dance libs but I'm missing something and I cannot perform a working scheleton.
Does anyone can helps?

Is there a classical way for securing a SPA and an API using Google Cloud App Engine?

I’d like to use the Google Cloud App Engine to serve a SPA and a REST API, both secured behind an authentication wall.
Is there any recommended way of doing this?
So far, I’ve found tutorials on how to secure an API, but not an SPA. Both ends are served from different projects, but I’d like to have a unique authentication step.
Typical flow would be:
Before serving the SPA source code, ask for authentication
Once authenticated, serve the SPA and allow the SPA to access the API resources
Thank you!
So far I’ve reviewed the documentation, it doesn't seem like there is any specific recommended way to authenticate an SPA within Google Cloud.
However, I think a pretty secure way would be to authenticate your application using the Toolkit Identity API of Google. The procedure would be to call this API from App Engine as the first necessary requirement.
This method works with Oauth2 access tokens. I think you could request for authentication credentials to your users before launching your application and granting access to the other resources/APIs.

Unable to get context part in Bigcommerce auth callback request

I am working with Bigcommerce api using oauth. I am currently in development phase. I have given auth callback url as
http://localhost:3000/resource_callback.
I am unable to get store hash in context. It is only sending scope, and code. What am I missing here? Just using http instead of https is the reason? Please help me with proper direction.
If you are receiving the Auth Callback Request but it only has code and scope query properties then the problem is how you are installing your app. At this time it is necessary to install an app directly through your store's Control Panel, rather than using a link to do the install (as is common with most oAuth implementations). The use of a link for the install is something that will likely be added in the future but oAuth on BC right now is geared towards public applications installed through the store.
That being said, it is possible to make oAuth credentials for a store even without making it a public application. Please follow the long answer seen on this question:
Can BigCommerce Private Apps use OAuth
This will cover the full process for generating oAuth API tokens from registering an app to installing into a store and beyond. Based on your question you should start at the Generate the Auth Callback Request section. If you follow the steps there then your Auth Callback Request will include the context property as well as the other two.
Update
You can now generate oAuth tokens in a store from Advanced Settings > API Accounts. As a result it is no longer necessary to install a draft app into a store for the sole purpose of generating oAuth tokens. You will still want to do this if you are developing an app for the BC App marketplace or developing a user interface for your app that you want to live in the Control Panel of the store.
Just went through the same thing. See here: Bigcommerce Authentication code. Let me know if you need more details. SSL is mandatory.