Git Product home page Git Product logo

next-cognito-auth's Introduction

Next Cognito Auth

Provides Cognito Authentication with hooks. All functions are promise based.

Provided features

Now only simple features are provided

  • SignUp
  • CodeConfirmation
  • SignIn
  • SignOut
  • Authenticate state
  • ForgotPassword
  • PasswordChange

Usage

usage

SetUp

In _app.tsx

import { NextCognitoAuthProvider, initServerSideAuth } from "next-cognito-auth";
const App = () => {
  const NCAConfig = {
    aws: { userPoolId: "USER_POOL_ID", clientId: "CLIENT_ID" },
    cookie: { domain: "your_domain" },
  };
  initServerSideAuth(NCAConfig);
  return (
    <NextCognitoAuthProvider config={NCAConfig}>
      <Component {...pageProps} />
    </NextCognitoAuthProvider>
  );
};

SignUp

import { useCognitoAuth } from "next-cognito-auth";

const SignUpSample = () => {
  const { SignUp } = useCognitoAuth();
  const handler = async () => {
    await SignIn("[email protected]", "SamplePassword!");
    console.log("DONE!");
  };
  //..
};

CodeConfirmation

import { useCognitoAuth } from "next-cognito-auth";

const CodeConfirmationSample = () => {
  const { codeConfirmation } = useCognitoAuth();
  const handler = async () => {
    await codeConfirmation("[email protected]", "182836");
    console.log("DONE!");
  };
  //..
};

SignIn

import { useCognitoAuth } from "next-cognito-auth";

const SignIn = () => {
  const { codeConfirmation } = useCognitoAuth();
  const handler = async () => {
    const res = await codeConfirmation("[email protected]", "182836");
    console.log("DONE!");
    const jwt = res.session.getIdToken().getJwtToken();
    console.log("tokens here!");
  };
  //..
};

AuthState

for now, CSR only

const WhoAmI = () => {
  const { isAuthenticated } = useCognitoAuth();
  return isAuthenticated ? (
    <span>Hello user!</span>
  ) : (
    <span>Hello stranger!</span>
  );
};

Work with SSR

Get auth user

Simillar with getServerSideProps of Next.js

import { withServerSideAuth } from "next-cognito-auth";
export const getServerSideProps = withServerSideAuth<{ auth: any }>(
  // Your auth user will be passed here. (nullable)
  ({ req, auth }) => {
    // So you can control auth behaviours ..
    if (!auth) {
      return { notFound: true };
    }
    return { props: { auth } };
  }
);

Get auth user manually in SSR scope

import { GetServerSideProps } from "next";
import { getServerSideAuth } from "next-cognito-auth";
export const getServerSideProps: GetServerSideProps = (ctx) => {
  const auth = getServerSideAuth(ctx);
  // do something..
};

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.