Social Login - Frontend Module
This is React Native code for social login feature. FOr this feature to be fully functional, you will need to install and configure Social Login - Backend module.
Initial Setup
In this section, for every mention of <module_directory>, consider the directory name of this module installed in your app. For example, if the SocialLogin module has a folder/directory with name SocialLogin12345, then that's what you should use to replace <module_directory>.
When you are finished with the setup, do not forget to commit all changed and created files to the GitHub project, so the module can be successfully deployed on Crowdbotics platform.
1. Install the following required dependencies (by modifying the project's package.json file under the dependencies section and add the dependencies manually):
"dependencies": {
"@react-native-community/google-signin": "^5.0.0",
"react-native-fbsdk": "1.1.2",
"@invertase/react-native-apple-authentication": "^2.1.0"
}
2. Open the /src/navigator/mainNavigator.js file and import the login navigator in the import section as shown:
import SocialLogin from '../features/<module_directory>/';
Then, add it to the AppNavigator, as follows:
const AppNavigator = {
SocialLogin: { screen: SocialLogin.navigator },
//@BlueprintNavigationInsertion
...
3. Add reducers to the store. Open /src/store/index.js file and add the following imports:
import socialLoginSaga from '../features/<module_directory>/auth/sagas';
import socialLoginReducer from '../features/<module_directory>/auth/reducers';
Locate the store creation with createStore, add comma at end of the last reducer (possibly customReducer) and ADD below the following code socialLogin: socialLoginReducer.
This is how your createStore should look like after modifications:
const store = createStore(
combineReducers({
apiReducer: apiReducer,
customReducer: customReducer,
socialLogin: socialLoginReducer,
}),
composeEnhancers(applyMiddleware(...middlewares))
);
Near the end, before the export { store } line, register the new sagas sagaMiddleware like this:
sagaMiddleware.run(socialLoginSaga);
4. Change the login screen destination to your desired screen/module (likely Home screen).
To do that, open the screens/constants.js file and edit the HOME_SCREEN_NAME value with the desired destination module. For example, if my home screen is called HomeScreen1234535, then I should change as follows: export const HOME_SCREEN_NAME = 'HomeScreen1234535'. If you desire, you can also update your logo image URL (be mindful that the size of the image should match the original ones for ideal results).
5. Make sure your backend support SENDGRID for emailing (optional)
If your app's backend does not have SENDGRID environmental variables available, make changes to project backend settings (in /backend/YOUR_PROJECT_NAME/settings.py file) like below:
EMAIL_HOST = env.str("EMAIL_HOST", "smtp.sendgrid.net")
EMAIL_HOST_USER = env.str("SENDGRID_USERNAME", "")
EMAIL_HOST_PASSWORD = env.str("SENDGRID_PASSWORD", "")
If this code already exists, you can just skip this step.
Next, you need to configure your own sendgrid credentials. Reference website: Sendgrid Once configured, add the sendgrid credential information to your project's environment variables.
Using the Crowdbotics Dashboard, navigate to "Settings" and select the tab "Environment Variables", here you will add the following variables:
SENDGRID_USERNAME
SENDGRID_PASSWORD
STEP 6: Update api url (optional)
If you have renamed your app through the Crowdbotics platform, you might need to change the reference url of your deployed app that is used to execute the api requests. To find out if you need to update, go to the file src/config/app.js and locate the emailAuthAPIEndPoint. If the value is your app's back-end url, then you do not need to change anything. If your current back-end url is different that what is shown there, update accordingly.
For example, after renaming my app from loginapp to personalapp, the code needs to be changed from:
export const appConfig = {
emailAuthAPIEndPoint: "https://loginapp-123.botics.co",
...
to
export const appConfig = {
emailAuthAPIEndPoint: "https://personalapp-123.botics.co",
...
Note for developers: you can access the user token through the reducer state (i.e. state.socialLogin.token and user auth information like email at state.socialLogin.user)
Configuring Apple Signin (Apple Developer account, iOS and Xcode required)
To be able to user signing with apple feature, it is required that you have access to a developer account with access for creating certificates, identifiers and keys. If you already have a Service Identifier, make sure to update your identifier with Signin with Apple capability (point e-g below). If you already completed the backend configuration, you can skip steps 1-3 and just make sure to get access to those values (bundle ID, service ID, Key Secret, etc).
- First, create a app ID at https://developer.apple.com/account/resources/certificates/list. Go to Identifiers, click on the + sign beside Identifiers or click on this page: Register new identifier. a) Choose App id and click Continue b) Choose App option and continue c) Add your app's name in the description field. Add your bundle ID (bundle identifier) that can be found on the XCode page. d) Go to Capabilities and enable. e) Click in the edit button, select Enable as a primary App ID and save f) Click continue. Verify all the input information and if everything is correct, click Register
- Now, register for a Service ID. a) Go to the same page as before, but now choose Service IDs option. b) Insert your desired description and create an identifier (it could be your bundle ID) c) Enable Signin with apple and on clicking Configure, choose your Primary App ID. d) There, you will be asked to select your primary App ID (select the one created earlier). Then, add your app's domain to the Website Urls section available. Your domain should be the same that you use to access your web app (as was described before). For this tutorial, we have social-login-1234.botics.co. Also add a url that looks like <your_app_domain_url>/accounts/apple/login/callback/. In the tutorial, we have https://social-login-1234.botics.co/accounts/apple/login/callback/. e) Save everything f) Verify if information is correct and click Register.
- Now go to Keys tab and click on + to add a new key (or navigate to Register a New Key page). a) Add a name for your key (choose some unique name) b) Enable Signin with Apple and click in Configure button c) If asked about domains, insert the same values that you did for Service IDs website urls. d) Save everything and download the generated certificate.
- Open your project on XCode, double-click in the project name in the left tree view. Select your app from the TARGETS section, then choose the Singin & Capabilities tab. Enable Automatically manage signing. For a more visual explanation, visit the official library tutorial with screenshots.
Apple Signin for Android
Open your the file src/features/<your_module_name>/auth/utils.js and update the following constant values:
// Add the service ID you just created on Apple. e.g.:
export const APPLE_SERVICE_ID = 'com.crowdbotics.social-login-1234'
// Add below the callback url as <your_app_domain_url>/apple/login/callback/. e.g.:
export const APPLE_REDIRECT_CALLBACK = 'https://social-login-1234.botics.co/accounts/apple/login/callback/'
Apple Singin for iOS
If you enabled Signin with Apple on XCode, you are mostly done with Apple signing. Verify if your app is in a iOS version of 13.0 or higher, since this is the version where Apple Singin was introduced. You can do that by both checking your project on XCode in the General tab, under Deployment Info and searching across your code for IPHONEOS_DEPLOYMENT_TARGET, which should be targeted to 13.0 or higher.
However, there could be a variety of issues during iOS deployment. Below you will see a list of helpful links to debug possible deployment issues on iOS.
References and XCode Troubleshooting
- Error when building: FBSDKCoreKit/FBSDKCoreKit.modulemap' not found
- Official docs for Facebook and iOS
- Official docs for Google and iOS
- Official docs for signin with Apple
- AutheorizationError error 1000 when testing on iOS simulator 6.Issues with architecture when building on simulator
- React-Native signin with apple library & tutorial
- iOS Simulator stuck on password input
License
MIT
<![CDATA[import React from 'react';
import {
View,
ImageBackground,
Image,
Text,
TouchableOpacity,
ScrollView,
} from 'react-native';
import { BACKGROUND_URL, LOGO_URL } from './screens/constants.js';
import {
apiLoginRequest,
apiSignupRequest,
apiFacebookLogin,
apiGoogleLogin,
apiAppleLogin,
} from './auth/actions';
import reducer from './auth/reducers';
import { styles } from './screens/styles';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import {
createNavigator,
createAppContainer,
TabRouter,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { SignIn, SignUp } from './screens/loginsignup';
import PasswordReset from './screens/reset';
import UserDemo from './screens/redirect-demo';
// Tabs
const LoginTabBar = ({ navigation }) => {
const { routes, index } = navigation.state;
const currentTab = routes[index];
return (
<View style={styles.tabStyle}>
{routes.map(route => (
<View
key={route.routeName}
style={
route.routeName == currentTab.routeName
? styles.activeTabStyle
: null
}>
<TouchableOpacity
onPress={() => navigation.navigate(route.routeName)}
accessibilityLabel="{route.routeName}">
<Text style={styles.tabStyle}>{route.params.name}</Text>
</TouchableOpacity>
</View>
))}
</View>
);
};
// Main View
const SocialLoginSignupView = ({ navigation }) => {
const { routes, index } = navigation.state;
const ActiveScreen = navigation.router.getComponentForState(navigation.state);
return (
<ScrollView style={[styles.container]}>
<KeyboardAwareScrollView contentContainerStyle={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<View style={styles.imageContainer}>
<ImageBackground
source={{
uri: BACKGROUND_URL,
}}
style={{
flex: 1,
justifyContent: 'center',
resizeMode: 'cover',
height: '100%',
width: '100%',
}}>
<Image
source={{
uri: LOGO_URL,
}}
style={{
width: 155,
height: 155,
alignSelf: 'center',
resizeMode: 'contain',
}}
/>
</ImageBackground>
</View>
</View>
<View style={[styles.cardView]}>
<LoginTabBar navigation={navigation} />
<View style={styles.tabContainerStyle}>
<ActiveScreen
navigation={{
...navigation,
state: routes[index],
}}
/>
</View>
</View>
</KeyboardAwareScrollView>
</ScrollView>
);
};
const LoginSignupRouter = TabRouter(
{
Login: {
screen: SignIn,
path: 'login',
params: { name: 'Sign In' },
},
SignUp: {
screen: SignUp,
path: 'signup',
params: { name: 'Sign Up' },
},
},
{
initialRouteName: 'Login',
},
);
const SocialLoginSignup = createAppContainer(
createNavigator(SocialLoginSignupView, LoginSignupRouter, {}),
);
export const SocialLoginNavigator = createStackNavigator(
{
LoginSignup: {
screen: SocialLoginSignup,
},
PasswordReset,
UserDemo,
},
{
initialRouteName: 'UserDemo',
defaultNavigationOptions: ({ navigation }) => ({ header: null }),
},
);
export default {
name: 'socialLogin',
navigator: SocialLoginNavigator,
slice: {
reducer,
actions: [
apiLoginRequest,
apiSignupRequest,
apiFacebookLogin,
apiGoogleLogin,
apiAppleLogin,
],
},
};]]>
