SAML tutorial markdown
This configurations uses React but Auth0 also supports other frameworks such a Angular or Vue. The React project uses a node package @auth0/auth0-react" which makes it possible to use Auth0 functions and objects like login, logout, isAuthenticated, and user. The entry points of the project e.g. index.js gets wrapped with an Auth0Provider from the same package with a set configuration which makes it posssible for us to the use the previosly mentioned Auth0 functionalites in all of our project.
Clone the repository, run yarn to install node packages. You'll have to create an env.local file with variables called REACT_APP_AUTH0_CLIENT_ID and REACT_APP_AUTH0_DOMAIN. You need to leave them undefined, as their required values come from the service provider Auth0 tenant which you haven't made yet.
First sign in or sign up to https://auth0.com/. Then create an Auth0 tenant that will act as a service provider.
Go to Applications > Applications, and press Create Application. Give it a fitting name and select the type you want to use. This project uses Single Page Web Application.
Press Settings and copy the domain and client id as it will be used in your project. Add your site url e.g. http://localhost:3000 to Allowed Callback URLs , Allowed Web Origins, and Allowed Logout URLs which makes it possible for Auth0 to redirect you back to the site after login/logout. If you have downloaded this project, then access it in your code editor, and create an env.local file, where you add REACT_APP_AUTH0_CLIENT_ID and REACT_APP_AUTH0_DOMAIN. These two variables are used in the Auth0Provider which can be seen in the index.js file. Auth0 will fail if redirectUri is not in the Allowed Callback URLs field.
Create a new tenant again, then either create a new application or use the default one.
Go to the settings tab, and scroll to Advanced settings
Press Certificates then Download certificate and select pem.
Then scroll up again and press Endpoints and copy the SAML protocol url.
Switch to the Service Provider tenant.
Go to Authentication > Enterprise and press the add button for SAML.
You'll now be able to change settings to for this connection.
Give it a fitting identifier and paste the copied url in Sign In URL and Sign Out URL, then add the downloaded certificate in X509 Signing Certificate. Scroll to the bottom and press save.
Now scroll back up and press Login experience
Scroll to the botton in the new view and toggle Display connection as a button. You can also add a descriptive text e.g. "Login with SAML".
Go back to Appilications > Applications, select the project you created, then press conections and toggle the SAML Enterprise option you've created.
Go to the top of the settings page for the SAML enterpise configuration and press setup.
Go the url that's located there, and you'll be directed to a page that looks like this:
This page contains urls and metadata that the IDP requires, so that this SAML configuration can be registered with it.
Copy post-back URL and Entity Id fields
Switch to your ID Provider tenant, press Applications > applications and select the app you configered before.
Press the Addons tab.
Press Settings
Delete the code in the settings window except for audience, and paste the entityId from the Service Provider. If you haven't copied it, then you can go back to https://auth0.com/docs/configure/saml-configuration/saml-identity-provider-configuration-settings, and change to the service provider tenant in the top right corner. The page might redirect you to a different page, but you can just press back in the browser, and you'll return to the metadata page with the right tenant is selected. The conection_name variable is the name of your enterprise connection.
You can now login with SAML in your project.
Logging out for SAML is a bit different in Auth0 fro other than other configurations e.g. Google social login, so it needs some further configuration. This might be cause for why Auth0 keeps logging the same user in everytime. This issue can be mitigated by open site in an incognito tab.
Auth0 has a tool that can decode SAML. Look at the network tab when logging in select the callback?conection=YOUR_CONECTION, copy the saml response in the bottom, and go the Auth0 tool and paste the SAML response there.
You can map SAML bindings like this for you enterprise configuration. personalIdentityNumber is a custom property for an user in the Auth0 IDP tenant
Links to Auth0 documentation & tutorials: https://auth0.com/docs/configure/saml-configuration/configure-auth0-saml-service-provider https://auth0.com/docs/configure/saml-configuration/configure-auth0-as-service-and-identity-provider