Boilerplate for Apollo authentication/authorization
Ecosystem:
- Apollo 2 Server (with Express)
- Apollo Client 2.0
- Vue.js (frontend web client)
- React (frontend web client)
Clone this repo using
git clone https://github.com/ecerroni/apollo-connector-kit.git
Move to the appropriate directory:
cd apollo-connector-kit
From the project's root folder
yarn install-all
from the project's root folder
yarn start
You may also run servers separately
from the project's root folder
cd frontend-vue && yarn dev
from the project's root folder
cd frontend-react && yarn dev
from the project's root folder
cd backend && yarn start
There are 2 mock users:
[Admin role]
username: rico
password: 123456
[Limited permissions role]
username: george
password: 123456
All essentials settings are under the settings folder.
You may change them as you see fit and they will propagate to the backend as well as across all client folders.
N.B. Because of how CRA works the frontend react will not pickup changes even after restarting the server (like Vue does, but for few changes related to the endpoint);
As a workaround you should always stop the server and run from the root project:
cd frontend-react && yarn install
Then restart the server
By default it accepts both LOCAL_STORAGE and HTTP_ONLY requests from clients.
If you want to narrow it down to just on type of authentication request being accepted you will need to set either one of the following to false in ./settings/app.json:
"STRATEGIES": {
"HTTP_ONLY": true,
"LOCAL_STORAGE": true
},
If you set them both to false the server will stop accepting requests altogether.
The client to have its requests accepted by the server it needs to declare what authentication strategy it is willing to use. The choosen strategy should match one of those allowed by the server, otherwise client's requests will be always rejected.
To set which type of authentication requests the client is willing to use set it here:
- For React:
./frontend-react/src/environment/_auth.js - For Vue:
./frontend-vue/src/environment/_auth.js
Choose local storage
export const CLIENT_AUTH_REQUEST_TYPE = AUTH.STRATEGIES.CLIENT.LOCAL_STORAGE;
OR
Choose cookies
export const CLIENT_AUTH_REQUEST_TYPE = AUTH.STRATEGIES.CLIENT.HTTP_ONLY
You may create new graphql components just by typing from project's root folder:
cd backend
yarn add-component-part <component_name> <component_part>
Ex. yarn add-component-part User user-authentication
The above will create under components a new folder named User with a subfolder named
user-authentication
user-authentication has all files needed to implement your component. You just need to fill them;
_input.js: input types you need for your component part's mutations_mutation.js: all mutations for this component part go here_query.js: all queries for this component part go here_type.js: all types and type resolvers for this component part go here
You may implement only what you need, though you should never delete any of these files. For example if you have no mutations and no inputs for a component part you should not delete _input.js and mutations.js. Just leave them there as they were created by the script.
Each component has at least one part, though it can have many.
Ex. components
- components
-- User
--- user-authentication
--- user-data
You may want to delete an existing graphql components just by typing from project's root folder:
cd backend
yarn remove-component-part <component_name> <component_part>
Ex. yarn remove-component-part User user-authentication
The above will delete under components in the folder named User the subfolder named
user-authentication
Moreover if the folder named User has no more sub-part it will be deleted by the script as well
Otherwise the server/nodemon may not immediately pick up changes in components' structure and even throw errors (for example adding/deleting components manually),
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent