Merge pull request #339 from developmentseed/feature/auth-mapping-team

Moves the authentication to use auth.mapping.team

Author: kamicut

cypress/e2e/auth.cy.js

@@ -21,7 +21,7 @@ describe('Check protected routes', () => {
   protectedRoutes.forEach((testRoute) => {
     it(`Route ${testRoute} needs authentication`, () => {
       cy.visit(testRoute)
-      cy.get('body').should('contain', 'Sign in with openstreetmap')
+      cy.get('body').should('contain', 'Sign in with OSM Teams')
     })
   })
 

cypress/support/commands/login.js

@@ -1,13 +1,10 @@
 const getSessionToken = require('../../../tests/utils/get-session-token')
 
-Cypress.Commands.add('login', (userObj) => {
+Cypress.Commands.add('login', (user) => {
   // Generate and set a valid cookie from the fixture that next-auth can decrypt
   cy.wrap(null)
     .then(() => {
-      return getSessionToken(
-        { ...userObj, sub: userObj.id },
-        Cypress.env('NEXTAUTH_SECRET')
-      )
+      return getSessionToken(user, Cypress.env('NEXTAUTH_SECRET'))
     })
     .then((encryptedToken) =>
       cy.setCookie('next-auth.session-token', encryptedToken)

src/components/sidebar.js

@@ -285,7 +285,7 @@ export default function Sidebar() {
         ) : (
           <Button
             className='global-menu__link login'
-            onClick={() => signIn('openstreetmap')}
+            onClick={() => signIn('osm-teams')}
           >
             Sign in
           </Button>

src/pages/api/auth/[...nextauth].js

@@ -1,38 +1,64 @@
 import NextAuth from 'next-auth'
+import { mergeDeepRight } from 'ramda'
+const db = require('../../../lib/db')
 
 export const authOptions = {
+  // Configure one or more authentication providers
   providers: [
     {
-      id: 'openstreetmap',
-      name: 'openstreetmap',
-      clientId: process.env.OSM_CONSUMER_KEY,
-      clientSecret: process.env.OSM_CONSUMER_SECRET,
+      id: 'osm-teams',
+      name: 'OSM Teams',
       type: 'oauth',
-      authorization: {
-        url: 'https://www.openstreetmap.org/oauth2/authorize',
-        params: {
-          scope: 'read_prefs',
-        },
-      },
-      token: 'https://www.openstreetmap.org/oauth2/token',
-      userinfo: 'https://api.openstreetmap.org/api/0.6/user/details.json',
-      profile({ user }) {
+      wellKnown: 'https://mapping.team/hyauth/.well-known/openid-configuration',
+      authorization: { params: { scope: 'openid offline' } },
+      idToken: true,
+      async profile(profile) {
         return {
-          id: user.id,
-          name: user.display_name,
-          image: user.img?.href,
+          id: profile.sub,
+          name: profile.preferred_username,
+          image: profile.picture,
         }
       },
+      clientId: process.env.OSM_TEAMS_CLIENT_ID,
+      clientSecret: process.env.OSM_TEAMS_CLIENT_SECRET,
     },
   ],
   callbacks: {
+    async jwt({ token, account, profile }) {
+      // Persist the OAuth access_token and or the user id to the token right after signin
+      if (account) {
+        token.accessToken = account.access_token
+        token.userId = profile.sub
+      }
+      return token
+    },
     async session({ session, token }) {
-      // Add user id to session
-      const userId = parseInt(token.sub)
-      session.user_id = userId
+      // Send properties to the client, like an access_token and user id from a provider.
+      session.accessToken = token.accessToken
+      session.user_id = token.userId
       return session
     },
   },
+
+  events: {
+    async signIn({ profile }) {
+      // On successful sign in we should persist the user to the database
+      let [user] = await db('users').where('id', profile.id)
+      if (user) {
+        const newProfile = mergeDeepRight(user.profile, profile)
+        await db('users')
+          .where('id', profile.id)
+          .update({
+            profile: JSON.stringify(newProfile),
+          })
+      } else {
+        await db('users').insert({
+          id: profile.id,
+          profile: JSON.stringify(profile),
+        })
+      }
+    },
+  },
 }
 
 export default NextAuth(authOptions)

src/pages/index.js

@@ -207,7 +207,7 @@ export default function Home() {
               </Button>
             </div>
           ) : (
-            <Button onClick={() => signIn('openstreetmap')}>Sign in →</Button>
+            <Button onClick={() => signIn('osm-teams')}>Sign in →</Button>
           )}
         </div>
         <div className='map-bg' />

src/pages/teams/[id]/invitations/[invitationId].js

@@ -21,7 +21,7 @@ export default function TeamInvitationPage({ errorCode, errorMessage }) {
       <article className='inner page'>
         <section>
           <h1>Please sign in</h1>
-          <Button onClick={() => signIn('openstreetmap')}>Sign in →</Button>
+          <Button onClick={() => signIn('osm-teams')}>Sign in →</Button>
         </section>
       </article>
     )

tests/utils/create-agent.js

@@ -5,7 +5,7 @@ async function createAgent(user) {
 
   if (user) {
     const encryptedToken = await getSessionToken(
-      { ...user, sub: user.id },
+      user,
       process.env.NEXTAUTH_SECRET
     )
     agent.set('Cookie', [`next-auth.session-token=${encryptedToken}`])

tests/utils/get-session-token.js

@@ -1,7 +1,9 @@
 const { hkdf } = require('@panva/hkdf')
 const { EncryptJWT } = require('jose')
 
-async function getSessionToken(token, secret) {
+async function getSessionToken(userObj, secret) {
+  const token = { ...userObj, userId: userObj.id }
+
   // Function logic derived from https://github.com/nextauthjs/next-auth/blob/5c1826a8d1f8d8c2d26959d12375704b0a693bfc/packages/next-auth/src/jwt/index.ts#L113-L121
   const encryptionSecret = await await hkdf(
     'sha256',