A screen to allow the user to create a new account for the application using their existing Apple credentials. It usually takes between 10.8 and 13.2 hours and costs $900 to add Apple Sign Up to an application.

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.
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.
"dependencies": {
"@react-native-community/google-signin": "^5.0.0",
"react-native-fbsdk": "1.1.2",
"@invertase/react-native-apple-authentication": "^2.1.0"
}
import SocialLogin from '../features/<module_directory>/';
Then, add it to the AppNavigator, as follows:
const AppNavigator = {
SocialLogin: { screen: SocialLogin.navigator },
//@BlueprintNavigationInsertion
...
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);
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).
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
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)
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).
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/'
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.