The last period we started experimenting with several apps, both small and big. The commonality every time was that we need a soort of base to start of from.
So that's what we created: our base app. Because we are grateful users of the various open source community we also wanted giving back by publishing the source code (also have a look at our fun Quiz app we opensourced and read the accompaning post )
Requirements
- Use Expo so we can create a iOS and Android app (and be ready for expo web)
- Use AWS Amplify
- Has the possibility for a user to sign and log in without using the withAuthenticator standard screens (we want to be able to tweak the experience)
- Has a in-app messaging system in place (for toast messages)
What we did
I started off with a empty Expo App. I'm a fan of React Navigation for it's ellegance. That is will support expo web to the near future also helps a great deal ;)
Then I devided the app in to segments (as you can see in the screen folder). This allows for a simpler development work flow: you always know simply in which part of the app your user is.
This also reflects in the navigation: I created two different navigation stacks. This makes it easier to split routes for logged in and non logged in users.
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="SignUp" component={SignUp} />
<Stack.Screen name="SignIn" component={SignIn} />
<Stack.Screen name="ForgotPassword" component={ForgotPassword} />
<Stack.Screen name="SignUpSuccess" component={SignUpSuccess} />
</Stack.Navigator>
and the Navigator of the authenticated part of the app:
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="SignUp" component={SignUp} />
<Stack.Screen name="SignIn" component={SignIn} />
<Stack.Screen name="ForgotPassword" component={ForgotPassword} />
<Stack.Screen name="SignUpSuccess" component={SignUpSuccess} />
</Stack.Navigator>
To make use we have both a secure app and clean code we're going to take advantage of the Amplify Hub in App.js. It's a first for me to use it but I liked it quited a bit. How it works for authentication: by signing in Amplify actually posts a message on the hub about the authentication state of the user. Once logged in, we simply switch the state to the 'closed app'.
useEffect(() => {
Hub.listen('auth', data => {
const { payload } = data;
if (payload.event === 'signIn') {
console.log('a user has signed in!');
setAppstate('closedApp');
}
if (payload.event === 'signOut') {
console.log('a user has signed out!');
setAppstate('openApp');
}
});
}, []);
Once the state is flipped we can use the closed app navigator:
<NavigationContainer>
{appState === 'openApp' && <OpenNavigation />}
{appState === 'closedApp' && <ClosedNavigation />}
</NavigationContainer>
I also tried to make use of the Hub for in-app messaging: for instance for toast messages; but somehow it always responded too slow and started make using of the useContext feature of react. Without stealing other peoples thunder: I used this tutorial to create it:
In the unauthenticated app next to obviously a nice landing page you can sign up, sign in or request your password. The ux is pretty basic because we want to be able to customize it to the app we are creating rather than adhering to a stringent base design. Speaking of design: for styling our components we are using the Styled Components package. It makes the styling so much easier by beging able to use CSS like syntax.
Known issues
- Not all error messages for signin up and in are completely covered at this point
- Deleting a user in Amplify is complex somehow
- More tests, tests, tests!
- UX
About Alowa Apps
Alowa Apps is a small company who deliver (web)apps with a clear purpose, great usability and awesome technology. We focus on e-health but we don't stay away from a little sidesteps like our online quiz tool (kwizz.guru) or a starter for apps built on AWS amplify & expo. We are big believers of the open source community and try to make contributions to that where ever we can.
Oldest comments (1)
Great post and intention, but honestly I was expecting this to go over a bit more than it did. There's not much about setup or config here. Just a routes scheme, and I don't really know anything about appstate or Hub. I was hoping to learn a bit about setting up Amplify w/ react native or expo here.