Adds Google as an Authentication method

examples/realworld/main.wasp

@@ -7,7 +7,9 @@ app Conduit {
 
   auth: {
     userEntity: User,
-    methods: [ UsernameAndPassword ],
+    methods: {
+      usernameAndPassword: {}
+    },
     onAuthFailedRedirectTo: "/login"
   },
 

examples/thoughts/main.wasp

@@ -3,7 +3,9 @@ app Thoughts {
   db: { system: PostgreSQL },
   auth: {
     userEntity: User,
-    methods: [ UsernameAndPassword ],
+    methods: {
+      usernameAndPassword: {}
+    },
     onAuthFailedRedirectTo: "/login"
   },
   dependencies: [

examples/tutorials/TodoApp/main.wasp

@@ -3,7 +3,9 @@ app TodoApp {
 
   auth: {
     userEntity: User,
-    methods: [ UsernameAndPassword ],
+    methods: {
+      usernameAndPassword: {}
+    },
     onAuthFailedRedirectTo: "/login"
   },
 

examples/waspello/main.wasp

@@ -7,7 +7,9 @@ app trello {
 
   auth: {
     userEntity: User,
-    methods: [ UsernameAndPassword ],
+    methods: {
+      usernameAndPassword: {}
+    },
     onAuthFailedRedirectTo: "/login"
   },
 

waspc/ChangeLog.md

@@ -3,7 +3,7 @@
 ## v0.6.0.0 (TBD)
 
 ### BREAKING CHANGES
-- The `EmailAndPassword` auth method has been renamed `UsernameAndPassword` to better reflect the current usage. Email validation will be addressed in the future.
+- The `EmailAndPassword` auth method has been renamed `usernameAndPassword` to better reflect the current usage. Email validation will be addressed in the future.
   - This means the `auth.userEntity` model should now have field called `username` (instead of `email`, as before).
     - If you'd like to treat the old `email` field as `username`, you can create a migration file like so:
       ```bash
@@ -24,8 +24,16 @@
       ```
       - NOTE: If you simply changed `email` to `username` in your .wasp file, Prisma will try to drop the table and recreate it, which is likely not what you want if you have data you want to preserve.
     - If you would like to add a new `username` column and keep `email` as is, be sure to add a calculated value in the migration (perhaps a random string, or something based on the `email`). The `username` column should remain `NOT NULL` and `UNIQUE`.
+- `WASP_WEB_CLIENT_URL` is now a required environment variable to improve CORS security. It is set by default in development. In production, this should point to the URL where your frontend app is being hosted.
+- The generated Dockerfile has been updated from `node:14-alpine` to `node:16-alpine`.
 - Wasp Jobs callback function arguments have been updated to the following: `async function jobHandler(args, context)`. Jobs can now make use of entities, accessed via `context`, like Operations. Additionally, the data passed into the Job handler function are no longer wrapped in a `data` property, and are now instead accessed exactly as they are supplied via `args`.
 
+### [NEW FEATURE] Google is now a supported authentication method!
+
+You can now offer your users the ability to sign in with Google! Enabling it is just a few lines and offers a fast, easy, and secure way to get users into your app! We also have a comprehensive setup guide for creating a new app in the Google Developer Console.
+
+Stay tuned, as more external auth methods will be added in the future. Let us know what you'd like to see support for next!
+
 ---
 
 ## v0.5.2.1 (2022/07/14)

waspc/data/Generator/templates/Dockerfile

@@ -1,5 +1,5 @@
 {{={= =}=}}
-FROM node:14-alpine AS node
+FROM node:{= nodeMajorVersion =}-alpine AS node
 
 
 FROM node AS base
@@ -11,6 +11,9 @@ FROM base AS server-builder
 RUN apk add --no-cache build-base libtool autoconf automake python3
 WORKDIR /app
 # Install npm packages, resulting in node_modules/.
+{=# usingServerPatches =}
+COPY server/patches ./server/patches
+{=/ usingServerPatches =}
 COPY server/package*.json ./server/
 RUN cd server && npm install
 {=# usingPrisma =}

waspc/data/Generator/templates/react-app/src/auth/buttons/Google.js

@@ -0,0 +1,11 @@
+import config from '../../config.js'
+
+export const googleSignInUrl = `${config.apiUrl}/auth/external/google/login`
+
+export function GoogleSignInButton(props) {
+  return (
+    <a href={googleSignInUrl}>
+      <img alt="Sign in with Google" height={props?.height || 40} src="/images/[email protected]" />
+    </a>
+  )
+}

waspc/data/Generator/templates/react-app/src/auth/pages/OAuthCodeExchange.js

@@ -0,0 +1,52 @@
+{{={= =}=}}
+import React, { useEffect } from 'react'
+import { useHistory } from 'react-router-dom'
+
+import config from '../../config.js'
+import api, { setAuthToken } from '../../api.js'
+
+// After a user authenticates via an Oauth 2.0 provider, this is the page that
+// the provider should redirect them to, while providing query string parameters
+// that contain information needed for the API server to authenticate with the provider.
+// This page forwards that information to the API server and in response get a JWT,
+// which it stores on the client, therefore completing the OAuth authentication process.
+export default function OAuthCodeExchange(props) {
+  const history = useHistory()
+  // NOTE: Different auth methods will have different Wasp API server validation paths.
+  // This helps us reuse one component for various methods (e.g., Google, Facebook, etc.).
+  const pathToApiServerRouteHandlingOauthRedirect = props.pathToApiServerRouteHandlingOauthRedirect
+
+  useEffect(() => {
+    exchangeCodeForJwtAndRedirect(history, pathToApiServerRouteHandlingOauthRedirect)
+  }, [history, pathToApiServerRouteHandlingOauthRedirect])
+
+  return (
+    <p>Completing login process...</p>
+  )
+}
+
+async function exchangeCodeForJwtAndRedirect(history, pathToApiServerRouteHandlingOauthRedirect) {
+  // Take the redirect query params supplied by the external OAuth provider and
+  // send them as-is to our backend, so Passport can finish the process.
+  const queryParams = window.location.search
+  const apiServerUrlHandlingOauthRedirect = `${config.apiUrl}${pathToApiServerRouteHandlingOauthRedirect}${queryParams}`
+
+  const token = await exchangeCodeForJwt(apiServerUrlHandlingOauthRedirect)
+
+  if (token) {
+    setAuthToken(token)
+    history.push('{= onAuthSucceededRedirectTo =}')
+  } else {
+    console.error('Error obtaining JWT token')
+    history.push('{= onAuthFailedRedirectTo =}')
+  }
+}
+
+async function exchangeCodeForJwt(url) {
+  try {
+    const response = await api.get(url)
+    return response?.data?.token
+  } catch (e) {
+    console.error(e)
+  }
+}

waspc/data/Generator/templates/react-app/src/auth/useAuth.js

@@ -11,7 +11,7 @@ async function getMe() {
 
     return response.data
   } catch (error) {
-    if (error.response?.status === 403) {
+    if (error.response?.status === 401) {
       return null
     } else {
       handleApiError(error)

waspc/data/Generator/templates/react-app/src/router.js

@@ -10,13 +10,26 @@ import createAuthRequiredPage from "./auth/pages/createAuthRequiredPage.js"
 import {= importWhat =} from "{= importFrom =}"
 {=/ pagesToImport =}
 
+{=# isExternalAuthEnabled =}
+import OAuthCodeExchange from "./auth/pages/OAuthCodeExchange"
+{=/ isExternalAuthEnabled =}
 
 const router = (
   <Router>
     <div>
       {=# routes =}
       <Route exact path="{= urlPath =}" component={ {= targetComponent =} }/>
       {=/ routes =}
+
+      {=# isExternalAuthEnabled =}
+
+      {=# isGoogleAuthEnabled =}
+      <Route exact path="/auth/login/google">
+        <OAuthCodeExchange pathToApiServerRouteHandlingOauthRedirect="/auth/external/google/validateCodeForLogin" />
+      </Route>
+      {=/ isGoogleAuthEnabled =}
+
+      {=/ isExternalAuthEnabled =}
     </div>
   </Router>
 )

waspc/data/Generator/templates/server/package.json

@@ -10,7 +10,8 @@
     "db-migrate-prod": "prisma migrate deploy --schema=../db/schema.prisma",
     "db-migrate-dev": "prisma migrate dev --schema=../db/schema.prisma",
     "start-production": "{=& startProductionScript =}",
-    "standard": "standard"
+    "standard": "standard",
+    "postinstall": "patch-package"
   },
   "nodemonConfig": {
     "delay": "1000"

waspc/data/Generator/templates/server/patches/oauth+0.9.15.patch

@@ -0,0 +1,21 @@
+diff --git a/node_modules/oauth/lib/oauth2.js b/node_modules/oauth/lib/oauth2.js
+index 77241c4..b6c0184 100644
+--- a/node_modules/oauth/lib/oauth2.js
++++ b/node_modules/oauth/lib/oauth2.js
+@@ -158,8 +158,14 @@ exports.OAuth2.prototype._executeRequest= function( http_library, options, post_
+     });
+   });
+   request.on('error', function(e) {
+-    callbackCalled= true;
+-    callback(e);
++    // Ref: https://github.com/ciaranj/node-oauth/pull/363
++    // `www.googleapis.com` does `ECONNRESET` just after data is received in `passBackControl`
++    // this prevents the callback from being called twice, first in passBackControl and second time in here
++    // see also NodeJS Stream documentation: "The 'error' event may be emitted by a Readable implementation at any time"
++    if(!callbackCalled) {
++      callbackCalled= true;
++      callback(e);
++    }
+   });
+
+   if( (options.method == 'POST' || options.method == 'PUT') && post_body ) {

waspc/data/Generator/templates/server/src/app.js

@@ -6,14 +6,18 @@ import helmet from 'helmet'
 
 import HttpError from './core/HttpError.js'
 import indexRouter from './routes/index.js'
+import config from './config.js'
 
 // TODO: Consider extracting most of this logic into createApp(routes, path) function so that
 //   it can be used in unit tests to test each route individually.
 
 const app = express()
 
 app.use(helmet())
-app.use(cors()) // TODO: Consider configuring CORS to be more restrictive, right now it allows all CORS requests.
+app.use(cors({
+  // TODO: Consider allowing users to provide an ENV variable or function to further configure CORS setup.
+  origin: config.frontendUrl,
+}))
 app.use(logger('dev'))
 app.use(express.json())
 app.use(express.urlencoded({ extended: false }))

waspc/data/Generator/templates/server/src/config.js

@@ -13,20 +13,23 @@ const config = {
     env,
     port: parseInt(process.env.PORT) || 3001,
     databaseUrl: process.env.DATABASE_URL,
+    frontendUrl: undefined,
     {=# isAuthEnabled =}
     auth: {
       jwtSecret: undefined
     }
     {=/ isAuthEnabled =}
   },
   development: {
+    frontendUrl: process.env.WASP_WEB_CLIENT_URL || 'http://localhost:3000',
     {=# isAuthEnabled =}
     auth: {
       jwtSecret: 'DEVJWTSECRET'
     }
     {=/ isAuthEnabled =}
   },
   production: {
+    frontendUrl: process.env.WASP_WEB_CLIENT_URL,
     {=# isAuthEnabled =}
     auth: {
       jwtSecret: process.env.JWT_SECRET

waspc/data/Generator/templates/server/src/core/auth.js

@@ -2,6 +2,7 @@
 import jwt from 'jsonwebtoken'
 import SecurePassword from 'secure-password'
 import util from 'util'
+import { randomInt } from 'node:crypto'
 
 import prisma from '../dbClient.js'
 import { handleRejection } from '../utils.js'
@@ -69,5 +70,52 @@ export const verifyPassword = async (hashedPassword, password) => {
   }
 }
 
-export default auth
+// Generates an unused username that looks similar to "quick-purple-sheep-91231". 
+// It generates several options and ensures it picks one that is not currently in use.
+export function generateAvailableDictionaryUsername() {
+  const adjectives = ['fuzzy', 'tall', 'short', 'nice', 'happy', 'quick', 'slow', 'good', 'new', 'old', 'first', 'last', 'old', 'young']
+  const colors = ['red', 'green', 'blue', 'white', 'black', 'brown', 'purple', 'orange', 'yellow']
+  const nouns = ['cat', 'dog', 'lion', 'rabbit', 'duck', 'pig', 'bee', 'goat', 'crab', 'fish', 'chicken', 'horse', 'llama', 'camel', 'sheep']
+
+  const potentialUsernames = []
+  for (let i = 0; i < 10; i++) {
+    const potentialUsername = `${adjectives[randomInt(adjectives.length)]}-${colors[randomInt(colors.length)]}-${nouns[randomInt(nouns.length)]}-${randomInt(100_000)}`
+    potentialUsernames.push(potentialUsername)
+  }
+
+  return findAvailableUsername(potentialUsernames)
+}
+
+// Generates an unused username based on an array of username segments and a separator. 
+// It generates several options and ensures it picks one that is not currently in use.
+export function generateAvailableUsername(usernameSegments, config) {
+  const separator = config?.separator || '-'
+  const baseUsername = usernameSegments.join(separator)
+
+  const potentialUsernames = []
+  for (let i = 0; i < 10; i++) {
+    const potentialUsername = `${baseUsername}${separator}${randomInt(100_000)}`
+    potentialUsernames.push(potentialUsername)
+  }
+
+  return findAvailableUsername(potentialUsernames)
+}
+
+// Checks the database for an unused username from an array provided and returns first.
+async function findAvailableUsername(potentialUsernames) {
+  const users = await prisma.{= userEntityLower =}.findMany({
+    where: {
+      username: { in: potentialUsernames },
+    }
+  })
+  const takenUsernames = users.map(user => user.username)
+  const availableUsernames = potentialUsernames.filter(username => !takenUsernames.includes(username))
+
+  if (availableUsernames.length === 0) {
+    throw new Error('Unable to generate a unique username. Please contact Wasp.')
+  }
+
+  return availableUsernames[0]
+}
 
+export default auth

waspc/data/Generator/templates/server/src/routes/auth/index.js

@@ -1,15 +1,23 @@
+{{={= =}=}}
 import express from 'express'
 
 import auth from '../../core/auth.js'
 import login from './login.js'
 import signup from './signup.js'
 import me from './me.js'
 
+{=# isExternalAuthEnabled =}
+import passportAuth from './passport/passport.js'
+{=/ isExternalAuthEnabled =}
+
 const router = express.Router()
 
 router.post('/login', login)
 router.post('/signup', signup)
 router.get('/me', auth, me)
 
-export default router
+{=# isExternalAuthEnabled =}
+router.use('/external', passportAuth)
+{=/ isExternalAuthEnabled =}
 
+export default router

waspc/data/Generator/templates/server/src/routes/auth/me.js

@@ -5,6 +5,6 @@ export default handleRejection(async (req, res) => {
   if (req.{= userEntityLower =}) {
     return res.json(req.{= userEntityLower =})
   } else {
-    return res.status(403).send()
+    return res.status(401).send()
   }
 })