Merge pull request #451 from developmentseed/fix/not-signed-in

Provides a page for when user is not signed in

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 OSM Teams')
+      cy.get('body').should('contain', 'Sign in')
     })
   })
 

cypress/e2e/organizations/permissions.cy.js

@@ -67,7 +67,7 @@ describe('Organizations page: Permissions', () => {
   it('Org is private', () => {
     // Unauthenticated user cannot access
     cy.visit('/organizations/1')
-    cy.get('body').should('contain', 'Sign in with OSM Teams')
+    cy.get('body').should('contain', 'Sign in')
 
     // Non-member cannot access
     cy.login(nonMember)
@@ -142,7 +142,7 @@ describe('Organizations page: Permissions', () => {
 
     // Unauthenticated can view org
     cy.visit('/organizations/2')
-    cy.get('body').should('contain', 'Sign in with OSM Teams')
+    cy.get('body').should('contain', 'Sign in')
 
     // Non-member can access, but cannot view private teams
     cy.login(nonMember)

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

@@ -40,6 +40,10 @@ export const authOptions = {
     },
   },
 
+  pages: {
+    signIn: '/signin',
+  },
+
   events: {
     async signIn({ profile }) {
       // On successful sign in we should persist the user to the database

src/pages/login.js

@@ -0,0 +1,47 @@
+import { signIn, getProviders } from 'next-auth/react'
+import { getServerSession } from 'next-auth/next'
+import { Box, Container, Heading, Text, Button } from '@chakra-ui/react'
+import InpageHeader from '../components/inpage-header'
+import { authOptions } from './api/auth/[...nextauth]'
+
+export default function SignIn() {
+  return (
+    <>
+      <Box as='main' mb={8}>
+        <InpageHeader>
+          <Heading color='white' mb={2}>
+            You are not signed in.
+          </Heading>
+        </InpageHeader>
+        <Container maxW='container.xl' as='section'>
+          <Box layerStyle={'shadowed'}>
+            <Text fontSize='2xl'>
+              Sorry, you need to be signed in to view this page.
+            </Text>
+            <Button my={4} onClick={() => signIn('osm-teams')}>
+              Sign in →
+            </Button>
+            <Text>Still having problems? Contact a system administrator.</Text>
+          </Box>
+        </Container>
+      </Box>
+    </>
+  )
+}
+
+export async function getServerSideProps(context) {
+  const session = await getServerSession(context.req, context.res, authOptions)
+
+  // If the user is already logged in, redirect.
+  // Note: Make sure not to redirect to the same page
+  // To avoid an infinite loop!
+  if (session) {
+    return { redirect: { destination: '/' } }
+  }
+
+  const providers = await getProviders()
+
+  return {
+    props: { providers: providers ?? [] },
+  }
+}