Volca Logo
Docs

Feature

Social Sign In

Social Sign In can enhance user experience by allowing individuals to access an application seamlessly using their existing social media credentials. This streamlined onboarding process can boost user adoption rates and reduce friction, resulting in higher conversion rates. Volca supports Google, Apple and Facebook out of the box and can also be extended with other identity providers.

Technologies

How is it built?

Learn more about the technologies behind this feature.

AWS Cognito

AWS Cognito is a fully-managed service provided by Amazon Web Services (AWS) that provides user sign-up, sign-in, and access control functionalities for web and mobile applications. It is a scalable and secure user directory that can handle user authentication and authorization for millions of users.

ID Tokens

ID will be issued to your users and passed to the Volca backend. By using these ID tokens users can be created in your own backend with information from the social login provider. Such as the users email, name and profile picture.

React

React is used to implement the social sign in functionality in the Volca webapp

Screenshots

Social Sign In example image

Sign in page with social sign in providers

Examples

Social sign in can easily be configured in Volca by registering a client with the login provider like Facebook, Apple or Google and adding the credentials to your app.config.ts file. You can learn how to register the clients in in this post from AWS.

When you have obtained the credentials, simply add them to your app config like this. You will have to add the secrets to AWS SSM and reference the parameter name in the config to keep them from being checked in to your repository. The keys will then be automatically picked up and configured during deployment.

The allowLocalhost: true configuration will make logins available from localhost so you can use the login methods from your local environment while developing!

staging: {
authentication: {
identityProviders: {
google: {
clientId: '<client-id>',
clientSecretSsmPath: '<ssm-parameter-path>',
},
facebook: {
clientId: '<client-id>',
clientSecretSsmPath: '<ssm-parameter-path>',
},
apple: {
clientId: '<client-id>',
teamId: '<team-id>',
keyId: '<key-id>',
privateKeySsmPath: '<ssm-parameter-path>',
},
},
allowLocalhost: true,
},
},

FAQ

FAQs

Frequently asked questions about Volca. Can't find what you are looking for? Feel free to contact us.


Volca Logotype

SaaS Starter Kit and Boilerplate

KITS

Python and DjangoRuby on RailsPHP

© 2024 SaaS Boilerplate and Starter Kit with Node.js and React - Volca.