Because this app uses GitHub logins, set up your app in GitHub:
- Go to Account Settings
- Select Developer settings from the sidebar
- Then click on OAuth Apps and then on Register new application
- Enter Application Name and Homepage URL
- For Authorization Callback URL:
http://localhost:[PORT]/auth/github/callback
- Click Register application
- Copy and paste Client ID and Client Secret keys into .env file
(instruction credits)
# Do this separate in both /client and /server folders
npm install
npm run dev
| Column |
Type |
Modifiers |
| id |
integer unsigned |
primary |
| github_id |
integer |
not null |
| avatar_url |
string |
not null |
| username |
string |
not null |
| updated_at |
timestamp |
default to now |
| Column |
Type |
Modifiers |
| id |
integer unsigned |
primary |
| user_id |
int unsigned |
FK from user |
| title |
string |
not null |
| content |
text |
not null |
| updated_at |
timestamp |
default to now |
| Endpoint URL |
Action |
Description |
/auth/github |
GET |
WebApp calls this to start the GitHub login process |
/auth/github/callback |
GET |
The "auth callback URL" value from your app page on github.com, ALSO inside /server/.env |
/auth/profile |
GET |
Used by React app to get profile. GitHub auth required; checks req.user for login |
/auth/logout |
GET |
Used by React app directly. Call passport's logout, ends session, and redirects to React |
/auth/success-callback |
GET |
A "sanity check" only used when we test GitHub server, in /server/.env |
/api/v1/posts/ |
GET |
Gets all posts. Adds isCurrentUser if the user is logged in (via session) |
/api/v1/posts/ |
POST |
Create a new post, requires GitHub login |
- USER clicks on the link to a URL hosted on the SERVER.(1)
- The SERVER redirects the user to a link to the PROVIDER. (2)
- USER accepts the permission
- PROVIDER redirects to a callback URL on the SERVER
- SERVER will authenticate using passport. If all goes well, we'll get the provider's info of the user.
- the SERVER will map that provider info to a user on the database, or create a new user.
- If all goes well SERVER then redirects to the CLIENT's home page or a failure page depending on the circumstances.
(1) This is different from what we have usually done; up until now, any URL we've it on the server has returned JSON. That's why there's no /api in front of it.
(2) This is the modal box where they ask the user if they agree.