Merge pull request #24 from TheRealFlyingCoder/develop

Rework the package to collate existing community auth packages

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
 	root: true,
 	parser: '@typescript-eslint/parser',
-	plugins: ['@typescript-eslint', 'jest', 'prettier'],
+	plugins: ['@typescript-eslint', 'prettier'],
 	extends: ['plugin:@typescript-eslint/recommended'],
 	rules: {
 		'@typescript-eslint/explicit-module-boundary-types': 'off',

.github/workflows/main.yml

@@ -39,24 +39,6 @@ jobs:
       - name: Typecheck
         run: npm run typecheck
 
-  test:
-    name: Unit and Integration Tests
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-
-      - name: Use Node 14
-        uses: actions/setup-node@v1
-        with:
-          node-version: 14
-
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1
-
-      - name: Test
-        run: npm run test -- --ci --coverage --maxWorkers=2
-
   lint:
     name: Linter
     runs-on: ubuntu-latest

README.md

@@ -2,23 +2,26 @@
 
 > A collection of Remix Auth strategies for Oauth2 Social logins.
 
-👷 If you are interested in creating one of the planned strategies, or maintaining an existing one reach out! 👷
+It's rare to see only one social login button, and no one likes a big package.json so here we are 👀
 
-Current strategies:
+Remix auth socials collates community Oauth packages in a way that allows you to set up multiple social logins with ease.
 
--   Discord
--   Github
--   Google
--   Facebook
--   Microsoft
-
-Planned:
+## The Collection:
 
--   Twitter
--   Apple
--   LinkedIn
--   Instagram
--   Reddit
+Please visit the repo's of each package to understand the specifics on their usage, and raise issues.
+
+[remix-auth-discord](https://github.com/JonnyBnator/remix-auth-discord) - By [Jonny](https://github.com/JonnyBnator)
+
+// Awaiting my [Pull Request](https://github.com/manosim/remix-auth-facebook/pull/1) so expect a different user experience for now
+[remix-auth-facebook](https://github.com/manosim/remix-auth-facebook) - By [Manos](https://github.com/manosim)
+
+[remix-auth-github](https://github.com/sergiodxa/remix-auth-github) - By [Sergio](https://github.com/sergiodxa)
+
+[remix-auth-google](https://github.com/pbteja1998/remix-auth-google) - By [Bhanu](https://github.com/pbteja1998)
+
+[remix-auth-microsoft](https://github.com/juhanakristian/remix-auth-microsoft) - By [Juhana](https://github.com/juhanakristian)
+
+[remix-auth-twitter](https://github.com/na2hiro/remix-auth-twitter) - By [na2hiro](https://github.com/na2hiro)
 
 ## Supported runtimes
 
@@ -31,11 +34,10 @@ All strategies will support cloudflare
 
 ## How to use
 
-The simplicity of this package is that all the included socials behave the same.
 
 ### Setup your routes
 
-To begin we will set up dynamic routes, that can handle each social on the fly
+To begin we will set up a dynamic route, that can handle each social on the fly
 
 ```tsx
 // app/routes/auth/$provider.tsx
@@ -119,11 +121,15 @@ export let authenticator = new Authenticator(sessionStorage, { sessionKey: '_ses
 // You may specify a <User> type which the strategies will return (this will be stored in the session)
 // export let authenticator = new Authenticator<User>(sessionStorage, { sessionKey: '_session' });
 
+const getCallback = (provider: SocialsProvider) => {
+  return `http://localhost:3333/auth/${provider}/callback`
+} 
+
 authenticator.use(new GoogleStrategy(
   {
     clientID: "YOUR_CLIENT_ID",
     clientSecret: "YOUR_CLIENT_SECRET",
-    callbackURL: `http://localhost:3333/auth/${SocialsProvider.GOOGLE}/callback`
+    callbackURL: getCallback(SocialsProvider.GOOGLE)
   },
   async ({ profile }) => {
     // here you would find or create a user in your database
@@ -135,12 +141,9 @@ authenticator.use(new FacebookStrategy(
   {
     clientID: "YOUR_CLIENT_ID",
     clientSecret: "YOUR_CLIENT_SECRET",
-    callbackURL: `https://localhost:3333/auth/${SocialsProvider.FACEBOOK}/callback`
+    callbackURL: getCallback(SocialsProvider.FACEBOOK)
   },
-  async ({ profile }) => {
-    // here you would find or create a user in your database
-    return profile;
-  }
+  async ({ profile }) => {}
 ));
 ```
 
@@ -193,12 +196,10 @@ export let loader = async ({ request, params }: LoaderArgs) => {
 
 export default function Index() {
   return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+    <div>
       <h1>Welcome!</h1>
       <p><a href="/login">Please log in</a></p>
     </div>
   );
 }
 ```
-
-TODO: Create readme doc for each strategy to show options and link here