https://github.com/dkershner6/amplify-authenticator-react-custom

A set of hooks and a component to easily implement completely custom auth components
https://github.com/dkershner6/amplify-authenticator-react-custom

hacktoberfest

Last synced: 29 days ago
JSON representation

A set of hooks and a component to easily implement completely custom auth components

• Host: GitHub
• URL: https://github.com/dkershner6/amplify-authenticator-react-custom
• Owner: dkershner6
• License: apache-2.0
• Created: 2021-10-23T16:18:20.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-07-04T00:22:31.000Z (5 months ago)
• Last Synced: 2024-09-27T09:18:28.217Z (about 2 months ago)
• Topics: hacktoberfest
• Language: TypeScript
• Homepage:
• Size: 667 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# amplify-authenticator-react-custom

A set of hooks and a component to easily implement completely custom auth components while using AWS Amplify / Cognito.

## Usage

Any components wrapped in `Authenticator` will be protected by the user being signed in.

```typescript

import { Authenticator } from "amplify-authenticator-react-custom";

const TestPage = () => {

    return (

        

            

        

    );

};

```

Unlike the normal authenticator, the components are not provided, your custom components are used instead, load them in using the components prop

```typescript

import { Authenticator } from "amplify-authenticator-react-custom";

const TestPage = () => {

    return (

         }}>

            

        

    );

};

```

To create components, use the provided hooks, here is a sign in example (a bit of pseudo-code, but should get the point across):

```typescript

const SignInComponent = () => {

    const signIn = useSignIn();

    return (

        

        

        

    )

}

```

## Contributing

All contributions are welcome, please open an issue or pull request.

To use this repository:

1. `npm i -g pnpm` (if don't have pnpm installed)

2. `pnpm i`

3. `npx projen` (this will ensure everything is setup correctly, and you can run this command at any time)

4. Good to make your changes!

5. You can run `npx projen build` at any time to build the project.