Novelty Plastic Moustache

    @newskit-render/auth
    TypeScript icon, indicating that this package has built-in type declarations

    0.35.0 • Public • Published

    @newskit-render/auth

    A package for the authentication of protected pages in your Next.js application. We are currently supporting Okta as a provider but there are also other options for authentication. You can see example usage with a preview article here: @newskit-render/core

    Getting started

    Before starting, either locally or on deployed enviroments, you will need the following in your .env.local file / CircleCi Config:

    • OKTA_CLIENT_ID - client id for OKTA app
    • OKTA_CLIENT_SECRET - client secret for OKTA app
    • OKTA_DOMAIN - domain of OKTA app i.e https://newscorp.okta.com
    • NEXTAUTH_URL - domain of your app i.e on local http://localhost:3000 or on some environment https://newskit-render.prod.ceng.newsuk.tech
    • NEXTAUTH_SECRET - A random string is used to hash tokens, sign/encrypt cookies and generate cryptographic keys. You can quickly create a good value on the command line via this openssl command. openssl rand -base64 32

    To get this information you need to raise a ticket with ServiceDesk for the attention of IAM and Collaboration team. You need to request they set up OKTA apps for each of your environments.

    IMPORTANT For each each environment the OKTA app's sign-in and sign-out urls need to be modified:

    local

    sign-in - http://localhost:3000/api/auth/callback/okta
    sign-out - http://localhost:300
    

    Other environment

    sign-in - {your domain / NEXTAUTH_URL}/api/auth/callback/okta
    sign-out - {your domain / NEXTAUTH_URL}
    

    The IAM and Collaboration team team need to set all this up. They also need to add you and anyone else you need as users on the apps. They will then send you the credentials OKTA_CLIENT_ID, OKTA_CLIENT_SECRET, OKTA_DOMAIN. With this you can test locally (.env.local) and once added to your CircleCi config on environments (Render is set up to pass the credentials so you just need to add them and then rebuild).

    Any issues contact the newskit-render team for help.

    Add it as a dependency:

    npm install @newskit-render/auth
    

    or

    yarn add @newskit-render/auth
    

    Add the provider

    In your main _app.jsx/tsx:

    import { SessionProvider } from '@newskit-render/auth'
    
    

    Wrap all the content and pass the pageProps as a prop to the provider:

    <SessionProvider pageProps={pageProps}>{Content goes here...}</SessionProvider>
    

    Create authentication route

    Under your /pages folder create an /api folder and an /auth folder inside the latter. Inside the /auth folder create a file called [...nextauth].ts. The path should be as follows: /pages/api/auth/[...nextauth].ts

    Create the route and pass your Okta credentials:

    import createAuthRoute from '@newskit-render/auth/providers'
    import { NextApiRequest, NextApiResponse } from 'next'
    const { OKTA_CLIENT_ID, OKTA_CLIENT_SECRET, OKTA_DOMAIN } = process.env
    
    export default (req: NextApiRequest, res: NextApiResponse) =>
      createAuthRoute(req, res, { OKTA_CLIENT_ID, OKTA_CLIENT_SECRET, OKTA_DOMAIN })
    
    

    Wrap your protected page with PageWithAuth component

    Import the following in your page component:

    import { PageWithAuth, getSession, signIn, signOut } from '@newskit-render/auth'
    

    Wrap all of your page component content with PageWithAuth. It will accept onDenied and isLoading props. You can use these to show content for the user when he is not authenticated or when the content is still loading.

    <PageWithAuth onDenied={accessDeniedPage} isLoading={showOnLoading}></PageWithAuth>
    

    You can call the signIn and signOut functions to initiate or terminate the authentication for the user. When using singIn set the provider so you don't have an extra login page signIn('okta').

    The last step is to get the session using the getSession hook. Add the hook under the getServerSideProps function and then include the result as a prop inside the props that will be returned.

    export async function getServerSideProps(context) {
      const session = await getSession(context)
    
      return {
        props: {
          ...some props
          session,
        },
      }
    }
    

    You can add some additional logic here if you want to prevent unnecessary requests or any other logic execution if the user is not authenticated:

    export async function getServerSideProps(context) {
      const session = await getSession(context)
    
      if (!session) {
        return {
          props: {},
        }
      }
    
      const { data } = await apolloClient.query({
        query: GET_DATA,
      })
    
      return {
        props: {
          data: data,
          session,
        },
      }
    }
    

    signOut should really be dealt with by your CMS but for testing purposes you will want a sign out button. We have added a CookieView component to the the package that only shows children if you set a cookie with the following:

    document.cookie = `nextAuthShowLogOut=true; Path=/`; location.reload();
    

    You can change the cookie name if you want.

    For the full page example see preview page

    Preview Pages

    To see Preview pages uses the following pattern:

    {site-domain}/preview/{article-id}/version/{version-id}

    Keywords

    none

    Install

    npm i @newskit-render/auth

    DownloadsWeekly Downloads

    336

    Version

    0.35.0

    License

    UNLICENSED

    Unpacked Size

    26.9 kB

    Total Files

    45

    Last publish

    Collaborators

    • newskit