CODEWITHSUNDEEP
authenticationamazon-cognitoadmin-on-restaws-amplifyreact-admin
iomario
iomario

Reputation: 666

How do you integrate aws-amplify authentication with react-admin?

I'm trying to implement aws-amplify to my react-admin. Especially for the Authentication part.

Instead of having something like this: react-admin with Amplify NavBar on top

I'm looking to have "UserName" and "LogOut" button from "aws-amplify" nicely like the default view: default-navbar-screenshot

authProvider <code example>:

const App = () => (
  <Admin
    dashboard={Dashboard}
    authProvider={authProvider}
    dataProvider={dataProvider}
  >
    <Resource name="users" list={UserList} icon={UserIcon} />
    <Resource
      name="posts"
      list={PostList}
      edit={PostEdit}
      create={PostCreate}
      icon={PostIcon}
    />
  </Admin>
);

react-admin has an authProvider props that we can custom-made, but I have no clue at how to create a component that is connected to aws-amplify.

Upvotes: 4

Views: 2454

Answers (2)

George
George

Reputation: 163

Both react-admin and Amplify can act as containers/wrappers for your application. However trying to merge the two of them together isn't as simple as using both components as they then compete with each other (unfortunately). However, as @Alexander has mentioned you can use the Amplify methods to create a custom authProvider. If you're looking for a little more plug-and-play, the react-admin-amplify npm package looks to do a lot of this for you. It looks to be fairly new, but there is active progress being made and it seems to have overcome many of the initial hurdles that you're seeing.

Upvotes: 1

Alexander
Alexander

Reputation: 1380

You need to create provider for authProvider and dataProvider, which will be compatible with react-admin.

From the official documentation:

What’s an authProvider? Just like a dataProvider, an authProvider is an object that handles authentication logic. It exposes methods that react-admin calls when needed, and that return a Promise. The simplest authProvider is:

const authProvider = {
    login: params => Promise.resolve(),
    logout: params => Promise.resolve(),
    checkAuth: params => Promise.resolve(),
};

Now for each method we need to map the method from aws-amplify:

import {Auth} from 'aws-amplify';

const authProvider = {
    login: ({ username, password }) => Auth.signIn(username, password),
    logout: Auth.signOut,
    checkAuth: Auth.currentAuthenticatedUser,
};

Upvotes: 3

Related Questions