-
Notifications
You must be signed in to change notification settings - Fork 42
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement Base Structure and GitHub OAuth Login (#97)
* Initializing theme files (#11) * Adding a basic mantine theme file. It will be updated as the code base develops. Any colors or gaps will not be hardcoded. They should first be defined in the theme and then should be used in the code. * updating .gitignore * Includes a comprehensive test setup with mock data and support structure. (#12) setting up tests in the future will be easier. * 9 tech debt setup public private routing (#13) * Working version of routing * Implemented routing, however tests for the login page needs to figured out. * implemented notification from mantine (#14) * 8 feature implement login functionality using GitHub oauth (#15) * clean up * A simple but beautiful login page * Github Oauth setup * 16 tech debt complete todos (#17) * Fixed testing setup and have all tests for OAuth. * Fixed remaining TODOs, added tests. * Adding a DEVELOPER.md and .env.example
- Loading branch information
Showing
74 changed files
with
1,279 additions
and
400 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| VITE_GITHUB_CLIENT_ID=your_client_id | ||
| VITE_GITHUB_REDIRECT_URI=http://localhost:3000/oauth/callback | ||
| VITE_GITHUB_CLIENT_SECRET=your_client_secret | ||
| VITE_GITHUB_CLIENT_USER_IDENTITY_URL=https://github.com/login/oauth/authorize | ||
| VITE_GITHUB_LOGIN_URL=https://github.com/login/oauth/access_token | ||
| VITE_GITHUB_CORS_LOGIN_URL=https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/authorize | ||
| VITE_GITHUB_SCOPES=repo | ||
| VITE_STORAGE_EXPIRY_DURATION=21600000 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,4 +3,4 @@ | |
| *.mjs | ||
| *.d.ts | ||
| *.d.mts | ||
| vite.config.ts | ||
| vite.config.ts!/coverage/ | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -24,5 +24,9 @@ | |
| "ignorePseudoClasses": ["global"] | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| }, | ||
| "ignoreFiles": [ | ||
| "coverage/**", | ||
| "node_modules/**" | ||
| ] | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| # Developer Setup Guide | ||
|
|
||
| ## Setting Up GitHub OAuth | ||
|
|
||
| To set up GitHub OAuth for this application, you will need to configure several environment variables in a `.env.local` file. Below are the steps to get you started. | ||
|
|
||
| 1. **Create a GitHub OAuth App**: | ||
| - Go to [GitHub Developer Settings](https://github.com/settings/developers). | ||
| - Click on "New OAuth App". | ||
| - Fill in the details with your application's information: | ||
| - **Application name**: Your app's name | ||
| - **Homepage URL**: `http://localhost:3000` | ||
| - **Authorization callback URL**: `http://localhost:3000/oauth/callback` | ||
| - After creating the app, you will get a **Client ID** and **Client Secret**. | ||
|
|
||
| 2. **Set Environment Variables**: | ||
| - Create a file named `.env.local` in the root directory of your project. | ||
| - Copy and paste the following template into `.env.local` and fill in the values with your GitHub OAuth credentials and URLs. | ||
|
|
||
| ```plaintext | ||
| VITE_GITHUB_CLIENT_ID=your_client_id | ||
| VITE_GITHUB_REDIRECT_URI=http://localhost:3000/oauth/callback | ||
| VITE_GITHUB_CLIENT_SECRET=your_client_secret | ||
| VITE_GITHUB_CLIENT_USER_IDENTITY_URL=https://github.com/login/oauth/authorize | ||
| VITE_GITHUB_LOGIN_URL=https://github.com/login/oauth/access_token | ||
| VITE_GITHUB_CORS_LOGIN_URL=https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/authorize | ||
| VITE_GITHUB_SCOPES=repo | ||
| VITE_STORAGE_EXPIRY_DURATION=21600000 | ||
| ``` | ||
| 3. **Run the Application**: | ||
| - Make sure you have all dependencies installed. | ||
| - Start the development server: | ||
| ```sh | ||
| npm install | ||
| npm run dev | ||
| ``` | ||
| ## Additional Notes | ||
| - The `VITE_GITHUB_CORS_LOGIN_URL` is used to handle CORS issues during development. You might need to adjust this depending on your deployment environment. | ||
| - The `VITE_STORAGE_EXPIRY_DURATION` is set to 6 hours (21600000 milliseconds). | ||
| By following these steps, you should be able to set up and run the application with GitHub OAuth configured. | ||
| Happy coding! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,7 @@ | ||
| import '@mantine/core/styles.css'; | ||
| import '@mantine/notifications/styles.css'; | ||
| import React, { FC } from 'react'; | ||
| import './App.css'; | ||
| import { AppLayout } from '@/layouts'; | ||
| import { AppProvider } from '@/providers'; | ||
|
|
||
| export const App: FC = () => ( | ||
| <AppProvider> | ||
| <AppLayout /> | ||
| </AppProvider> | ||
| ); | ||
| export const App: FC = () => <AppProvider />; |
Empty file.
This file was deleted.
Oops, something went wrong.
Empty file.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { theme } from '@/theme'; | ||
|
|
||
| describe('Theme Configuration', () => { | ||
| describe('Colors', () => { | ||
| it('should have deepBlue and blue color palettes defined', () => { | ||
| expect(theme.colors?.deepBlue).toBeDefined(); | ||
| expect(theme.colors?.blue).toBeDefined(); | ||
| }); | ||
|
|
||
| it('should have 10 shades for deepBlue', () => { | ||
| expect(theme.colors?.deepBlue?.length).toBe(10); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Shadows', () => { | ||
| it('should define medium and extra-large shadows', () => { | ||
| expect(theme.shadows?.md).toBeDefined(); | ||
| expect(theme.shadows?.xl).toBeDefined(); | ||
| }); | ||
|
|
||
| it('should have correct shadow value for md', () => { | ||
| expect(theme.shadows?.md).toBe('1px 1px 3px rgba(0, 0, 0, .25)'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Typography', () => { | ||
| it('should have a Roboto font family for headings', () => { | ||
| expect(theme.headings?.fontFamily).toBe('Roboto, sans-serif'); | ||
| }); | ||
|
|
||
| it('should define font size for h1', () => { | ||
| expect(theme.headings?.sizes?.h1?.fontSize).toBeDefined(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,21 @@ | ||
| import axios from 'axios'; | ||
| import { useAuthStore } from '@/store'; | ||
|
|
||
| export const gitHubClient = () => { | ||
| //TODO: Is this a good practice? | ||
| const { token } = useAuthStore.getState(); | ||
|
|
||
| return axios.create({ | ||
| export const gitHubClient = () => | ||
| axios.create({ | ||
| baseURL: 'https://api.github.com/', | ||
| headers: { | ||
| Authorization: `Bearer ${token}`, | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| }); | ||
|
|
||
| const GithubLoginCredentials = { | ||
| clientId: import.meta.env.VITE_GITHUB_CLIENT_ID, | ||
| loginUrl: import.meta.env.VITE_GITHUB_CLIENT_USER_IDENTITY_URL, | ||
| redirectUri: import.meta.env.VITE_GITHUB_REDIRECT_URI, | ||
| scopes: import.meta.env.VITE_GITHUB_SCOPES, | ||
| }; | ||
|
|
||
| export const githubLogin = () => { | ||
| const { loginUrl, clientId, redirectUri, scopes } = GithubLoginCredentials; | ||
| window.location.href = `${loginUrl}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes}`; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,6 @@ | ||
| export { apiClient } from './api-client'; | ||
| export { githubLogin } from './github-client'; | ||
|
|
||
| export * from './user'; | ||
| export * from './repos'; | ||
| export * from './oauth'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './use-oauth'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import axios from 'axios'; | ||
| import { useQuery } from '@tanstack/react-query'; | ||
|
|
||
| export const exchangeGithubCodeForToken = async (code: string | null) => { | ||
| const data = { | ||
| client_id: import.meta.env.VITE_GITHUB_CLIENT_ID, | ||
| client_secret: import.meta.env.VITE_GITHUB_CLIENT_SECRET, | ||
| code, | ||
| redirectUri: import.meta.env.VITE_GITHUB_REDIRECT_URI, | ||
| }; | ||
| const response = await axios.post('/login/oauth/access_token', data, { | ||
| headers: { | ||
| Accept: 'application/json', | ||
| }, | ||
| }); | ||
| return response.data as OAuth; | ||
| }; | ||
|
|
||
| export const useOAuth = ({ code }: { code: string | null }) => | ||
| useQuery({ | ||
| queryKey: ['Github', 'oauth', code], | ||
| queryFn: () => exchangeGithubCodeForToken(code), | ||
| retry: 1, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './github'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| type OAuth = { | ||
| access_token: string; | ||
| scope: string; | ||
| token_type: string; | ||
| }; |
Oops, something went wrong.