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

Question

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.

You need to call the aws amplify sdk from inside the authProvider. Pick up the auth params from the params provided to auth provider. It is all fully configurable — kunal pareek, Mar 22 '19 at 04:16

score 3 · Answer 1 · answered Jan 21 '20 at 19:00

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,
};

Does anyone know of a working example of this? The only one I can find is viewing the source code of the AuthProvider in the react-admin-amplify repo — Taylor A. Leach, Jun 25 '21 at 19:43

score 1 · Answer 2 · answered Dec 11 '20 at 16:42

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.

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

2 Answers2