Learn Auth0, Clojure and Gulp

An easy to implement, adaptable authentication and authorization platform which basically makes your login box awesome.



auth0

Secure React User Authentication with Auth0

Auth0 Actions are serverless developer tools you can use to customize Auth0.

Actions allow developers to extend Auth0 beyond what it can do out of the box by adding logic to login, user registration, password changes, and other events.
You can quickly solve complex identity problems without hosting your own environment, and worrying about performance, maintenance, and security. Your code is stored and runs on infrastructure owned and maintained by Auth0.

Actions are JavaScript functions that run as part of a flow.  Action integrations can be installed in the Dashboard, or Actions can be written directly in the Dashboard’s JavaScript code editor.

With the  drag-and-drop flow editor, you can visually arrange Actions to build custom identity flows. You don’t have to rewrite your code to reorder and reconfigure functions.

Follow along with Will Johnson as you download a sample application configured with Auth0, then write code for several Actions.

Some examples of Actions you can create:

- Block access from certain counties with an Action from the Auth0 marketplace. 
- Use an npm package and secrets to send a Slack message.
- Redirect users to an a URL after login and back to Auth0 

This course will give you a solid foundation to start developing your own Actions.


Custom Authentication Flows for Modern Applications with Auth0 Actions

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

gulp

Building upon the `watch` task that we begin this lesson with, we’ll look at how to create a local development server using the `app` directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public `.stream()` method that is designed exactly for this purpose.

Gulp and Browserify - Adding Live Reload with Browsersync

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

babel

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using `exorcist`.

Gulp and Browserify - Adding Babel & Source Maps

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

browserify

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single `bundle.js` file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by `gulp.dest` and finish by writing the bundle to a `dist` directory.

Gulp and Browserify - Initial Setup

A brief introduction to using GulpJS in your JavaScript application and creating your first Gulp task.

Installing and Writing a Default Task with Gulp

Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task `watch` & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.

Gulp and Browserify - Hooking up Watchify

We will look at bundling your JavaScript files using Gulp, Gulp-Concat, and Gulp-Uglify

Bundling Your JavaScript Files with Gulp

Clojure is a dynamic, general-purpose programming language, combining the approachability and interactive development of a scripting language with an efficient and robust infrastructure for multithreaded programming. Clojure is a compiled language, yet remains completely dynamic – every feature supported by Clojure is supported at runtime. Clojure provides easy access to the Java frameworks, with optional type hints and type inference, to ensure that calls to Java can avoid reflection.

clojure

We'll use Lumo, a cross-platform standalone ClojureScript compiler and Node.js environment, to create Hello as a command-line application. 

In this lesson, I’ll show you how to install Lumo through NPM, invoke a function in ClojureScript, and use the println function from the core library.

Compile and Run a ClojureScript Command-line App on Node.js with Lumo

In this lesson I show what a Clojure keyword is and why we prefer them as keys in maps; and the three ways we can look up a value in a map.

Keywords and Map Lookup in Clojure and ClojureScript

Para iniciar con Clojure es necesario realizar algunas configuraciones e instalar algunas herramientas.
Lo primero es instalar [leiningen](https://leiningen.org) y configurar tu editor de código.
En este caso configuraremos VIM. Para esto instalaremos algunos ]plugins 

* [vim-fireplace](https://github.com/tpope/vim-fireplace)
* [vim-salve](https://github.com/tpope/vim-salve)
* [coc-conjure](https://github.com/jlesquembre/coc-conjure)

Configurar ambiente de desarrollo y VIM para Clojure

Sign up for a free Auth0 account. A new Auth0 account creates a [new tenant](https://auth0.com/docs/get-started/auth0-overview/create-tenants) within the Auth0 Dashboard the tenant will house your applications connections and user profiles.

Sign up for a [free Auth0 account here](https://a0.to/egghead).

Create an Auth0 Account

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Create a new application with the Auth0 CLI with the `auth0 apps create` command.

Name the application, create a description, and select the application type.

If you don't have an application set up with Auth0 you can run `auth0 quickstarts download` to download a sample application that's already configured with Auth0. 

Once the quickstart is downloaded open your code editor and open `src/auth_config.json` file and copy the domain and clientId from the settings inside the Auth0 dashboard, if they aren't population already.

Run `npm run start` to load the application on `localhost:3000` and test out the login flow.

Create New Auth0 Application and Download Quickstart

With Actions you have the option to use pre-configured Actions from the [Auth0 Marketplace](https://marketplace.auth0.com/features/actions).

Add the [Country-based Access](https://marketplace.auth0.com/integrations/country-based-access) Action to your Action library to restrict users access based on their country. 

Once the Action is added to your library, choose the Login flow trigger. Use the drag and drop flow editor to add the Country-based Access Action to the Auth0 login flow.

Add Action from Auth0 Marketplace To Restrict Access By Country

Add a custom field to the users metadata with the [Pre User Registration trigger](https://auth0.com/docs/customize/actions/flows-and-triggers/pre-user-registration-flow).

In the Actions editor enter the following code
```js
exports.onExecutePreUserRegistration = async (event, api) => {
  api.user.setUserMetadata("favorite_ninja_turtle","raphael" )
};
```
This action uses the [API object](https://auth0.com/docs/customize/actions/flows-and-triggers/pre-user-registration-flow/api-object) to add the new metadata before the user is saved to the database

To learn more about Auth0 user metadata [read the docs here](https://auth0.com/docs/manage-users/user-accounts/metadata)



Write Action To Add Metadata To A New User Profile

After a user successfully logs in, Auth0 sends an ID token to your React application. You can use the data from the ID token to personalize the user interface of your React application. ID tokens issued by Auth0 are [JWTs](https://jwt.io) and you can add custom claims to the JWTs using Actions.

Create a Login Action to add the user metadata as a customer claim. 


```js
exports.onExecutePostLogin = async (event, api) => {
  const namespace = `https://myapp.example.com`
  const { favorite_ninja_turtle } = event.user.user_metadata

  if (event.authorization) {
    api.idToken.setCustomClaim(`${namespace}/favorite_ninja_turtle`, favorite_ninja_turtle)
  }
};
```
Auth0 allows namespaced and non-namespaced claims.To avoid name collisions, we recommend using namespaced claims. 

You can use any non-Auth0 HTTP or HTTPS URL as a namespace identifier.

Use a URL that you control as a namespace identifier; this allows you to avoid the risk that someone else is using the same namespace. The namespace URL does not have to point to an actual resource. It is only used as an identifier; it will not be called.

The JWT returned to the requesting application is built and signed at the end of the trigger running. The final, signed JWT is not accessible in an Action.

Check out the docs to learn more about [creating custom claims](https://auth0.com/docs/secure/tokens/json-web-tokens/create-custom-claims)

Add a Custom Claim To Auth0 JWT Id Token

Download the Auth0 CLI on a Mac with homebrww with the command `brew tap auth0/auth0-cli && brew install auth0` 

For download instructions for Windows or Linux check out the [Auth0 CLI's README](https://github.com/auth0/auth0-cli)

When the CLI is installed use the command `auth0 login` to connect the Auth CLI to your Auth0 tenant. 

Install and Connect the Auth0 CLI to Auth0 account

Add the `slack-notify` npm package from the Actions editor to send a Slack message when a new user registers for your application. 

Create a Post User Registration action.

Go to `api.slack.com` create a new app, active **Incoming Webhooks**, and get your Slack Webhook URL.

> Your webhook URL contains a secret. Don't share it online, including public Git repositories.

In the Action editor store the Slack Webhook URL as a secret and add the `slack-notify` npm package.

In the Actions editor enter the follow code:

```js
const initSlackNotify = require('slack-notify')

exports.onExecutePostUserRegistration = async (event) => {
  const slack = initSlackNotify(event.secrets.SLACK_WEBHOOK_URL);
  const message = `New User: ${event.user.email}`

  slack.success({
    text: message
  })
};
```
Before deploying test out the Action by click the Test icon. Once test is successful click deploy.

Then click **Add to flow** and drag the Action into the Post User Registration flow.

Add NPM Packages and Store Secrets with Auth0 Actions

You can use the post-login Action to redirect users before an authentication transaction is complete. This lets you implement custom authentication flows that require additional user interaction beyond the standard login form.

Call `api.redirect.sendUserTo()` with the URL you want to redirect to as a string

After the redirect, in your app resume authentication by redirecting the user to the `/continue` endpoint and include the `state` parameter from the URL. 

If you don't send the original state back to the `/continue` endpoint, Auth0 will lose the context of the login transaction and the user will not be able to log in.


In your application redirect to: `https://{yourAuth0Domain}/continue?state=abc123`

After the user has been redirected to the `/continue` endpoint, the Action will resume by calling the `onContinuePostLogin` function. 

For redirects to work properly, you must have a uncomment the `onContinuePostLogin` function even if the function is empty.

Check if the user has seen the announcement 

```js
  if (!event.user.app_metadata[''announcement_seen'']) {
    api.redirect.sendUserTo("http:://localhost:3000/announcement");
  }
};
```

If the user hasn't seen the announcement set the `app_metadata`

```js
exports.onContinuePostLogin = async (event, api) => {
  api.user.setAppMetadata('announcement_seen', true);
};
``` 


Redirect User After Login with Auth0 Actions

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Start by cloning the `spa_react_javascript_hello-world_react-router-6` repository on its starter branch:

```bash
git clone -b starter git@github.com:auth0-developer-hub/spa_react_javascript_hello-world.git
```

Change your current directory to `spa_react_javascript_hello-world_react-router-6`

```bash
cd spa_react_javascript_hello-world
```

Install the project dependencies

```bash
npm install
```

Run the React application on `http://localhost:4040`

```bash
npm start
```


Download Starter Application from Auth0 Developer Center

Click the **Create Application** button.

Sign up for a [free Auth0 account](https://a0.to/egghead-react) here. 

Add the name "React Code Sample" and select "Single Page Applications" and the application type then click **Create**

Click on the **Settings** tab of your Auth0 Application page, scroll down to "Application URIs" section, and fill in these values:

**Allowed Callback URLs**
http://localhost:4040/

**Allowed Logout URLs**
http://localhost:4040

**Allowed Web Origins**
http://localhost:4040

Scroll down and click the **Save Changes** button.

On the "Basic Information" section get the Auth0 Domain and Auth0 Client ID values and paste them a `.env` file in the root of the project.

```env
REACT_APP_AUTH0_DOMAIN=AUTH0-DOMAIN
REACT_APP_AUTH0_CLIENT_ID=AUTH0-CLIENT-ID
REACT_APP_AUTH0_CALLBACK_URL=http://localhost:4040/
```





Link Auth0 Application to React Application

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

After this course, you should be able to leverage SolidStart to build your Solid applications.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

Getting Started with SolidStart

Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

Cascading Style Sheets bring order and beauty to our applications.

Create Professional Responsive Websites using Bootstrap

This course is perfect for those looking for a lightweight alternative to NgRx Store that scales effortlessly.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

Scalable Signals Angular Architecture with NGRX Signal Store

Learn how the latest JavaScript features can help you improve your codebase. 

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

course repository: https://github.com/ducin/egghead-typescript/tree/brand-types-value-objects

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Domain Data Modelling using TypeScript Aliases, Brand Types and Value Objects

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

Learn the fundamentals of React Query by going through the basic API and then implementing search in an employee tracking app.

Simplify State Management with React Query

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create Interactive 3D Experiences with TresJS

You've seen that Angular signals are here, and know that signal-components are coming up.

This marks a paradigm-shift towards reactive programming in Angular.

Are you ready?

What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

And feel ready when signal-based components come?

Changes are coming, and you can get ahead of them.

By taking this cousre you will learn how to:

- Create computed signals
- Share your signals in services
- Use and cleanup signal effects
- Turn signals into observables and vice versa
- ... and more

In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

angular

Modernize State Management in Angular with Signals

Get started with Supabase on your machine

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

Search

Search Results